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 a single parameter as mentioned above and described below:
- nodes: It is a set of Node objects or HTML DOMString objects that have 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
let parent = document.getElementById("div");
console.log(parent);
// Get the element to add after
let 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 the output, it can be seen that after the button is clicked, a new node is inserted after the child of the <p> element.
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
let parent = document.getElementById("div");
console.log(parent);
// Get the element to add after
let 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:
Supported Browsers: The browsers supported by DOM after() method are listed below:
- Google Chrome 54 and above
- Edge 17 and above
- Firefox 49 and above
- Opera 39 and above
- Safari 10 and above
- Internet Explorer not supported
Last Updated :
21 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...