Use before method to add element after another element in JavaScript.
Note: before and after are both marked as “experimental” on MDN page: Experimental. Expect behavior to change in the future.
JavaScript add element after another HTML example
HTML example codes:-
Insert p tag after div tag
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <body> <div id="div1">Hello world</div> <script> // Parent Element const el = document.getElementById("div1"); // creating new element const newEl = document.createElement("p"); newEl.id = "foo"; el.after(newEl); // Adding text in new p tag document.getElementById("foo").innerHTML = "I am new tag"; </script> </body> </html> |
Output:
Read more:
Do comment if you have any doubts and suggestions on this JS codes.
Note: All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.