HTML DOM before() method
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 >w3wiki</ 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 >w3wiki</ 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
Contact Us