The before() 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 before the ChildNode that we have mentioned.
Syntax:
ChildNode.before(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 before the ChildNode.
Example 1: In this example, we will insert an element node to the DOM before the child element.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM before() 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 before
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.before(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 before the child <p> element.
Example 2: In this example, we will insert some text before the child node.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM before() 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 before
let para =
document.getElementById("p");
// Function to add the element
function add() {
// Insert a text element
// before this element
para.before(
"Text Added Before ChildNode");
}
console.log(parent.outerHTML);
</ script >
</ body >
</ html >
|
Output:
Supported Browsers: The browsers supported by DOM before() method are listed below:
- Google Chrome 54
- Edge 17
- Firefox 49
- Opera 39
- Safari 10
- Internet Explorer not supported
Last Updated :
20 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...