JavaScript insert after | Append element example

JavaScript doesn’t have insertAfter() method, but insertBefore() method that allows you to insert a new after an existing node as a child node.

How to insert an element after another element in JavaScript?

To insert a new element after an existing element, first identify that element and then create a new one after that using the after the method.

For child node, First, select the next sibling node of the existing node. Then, select the parent node of the existing node and call the insertBefore() method.

JavaScript insert after Example

HTML examples code:

Insert div after div element

Output:

JavaScript insert after element Example

Insert new li in the existing list

Output:

JavaScript append element HTML example

Do comment if you have any doubts and suggestion on this topic.

Note: All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.