HTML | DOM after() Method - GeeksforGeeks

05 Jun, 2020
The after() method is used to insert a set of Node objects or HTML DOMString objects in the children list of the ChildNode’s parent. The element is inserted after the ChildNode that we mentioned.
Syntax:
ChildNode.after(Node or DOMString)
Parameter: This method accepts single parameter as mentioned above and described below:
nodes: It is a set of Node objects or HTML DOMString objects that has to be inserted after the ChildNode.
Example 1: In this example, we will insert an element node to the DOM after the child element.
HTML
<!DOCTYPE html><html>  <head>    <title>        HTML | DOM after() Method    </title></head>  <body>    <div id="div">        <h1>GeeksforGeeks</h1>        <p id="p">Child Node</p>    </div>          <button onclick="add()">click to add</button>    <script>        // Get the parent element        var parent = document.getElementById("div");        console.log(parent);          // Get the element to add after        var para = document.getElementById("p");          // Function to add the element        function add() {              // Create a new element to add            const div = document.createElement("div");            div.innerHTML = "<h4>new node</h4>";              // Insert the created element            para.after(div);        }        console.log(parent.outerHTML);    </script></body>  </html>
Output: 
In output, it can be seen that after the button is clicked, a new node is inserted after child of the <p> element.
Before Clicking the Button:
Before Clicking the Button:
After Clicking the Button:
After Clicking the Button:
Example 2: In this example, we will insert some text after the child node.
HTML
<!DOCTYPE html><html>  <head>    <title>        HTML | DOM after() Method    </title></head>  <body>    <div id="div">        <h1>GeeksforGeeks</h1>        <p id="p">Child Node</p>    </div>      <button onclick="add()">        click to add    </button>          <script>        // Get the parent element        var parent = document.getElementById("div");        console.log(parent)          // Get the element to add after        var para = document.getElementById("p");          // Function to add the element        function add() {              // Insert a text element            // after this element            para.after("Text Added");        }        console.log(parent.outerHTML);    </script></body>  </html>
Output:
Before Clicking the Button:
Before Clicking the Button:
After Clicking the Button:
After Clicking the Button:
Supported Browsers: The browsers supported by DOM after() method are listed below:
Google Chrome
Edge
Firefox
Opera
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript