The insertBefore() method in JavaScript is a built-in method that allows you to insert a new element before an existing element in the Document Object Model (DOM).
The syntax for using the insertBefore() method is:
parentElement.insertBefore(newElement, existingElement);
This method takes two parameters: the first parameter is the new element that you want to insert, and the second parameter is the existing element before which you want to insert the new element.
The insertBefore() method is commonly used in web development to dynamically add or rearrange elements on a web page.
JavaScript insertBefore() Method example
Simple example code using the insertBefore() method to insert a new element node before an existing element node:
<!DOCTYPE html>
<html>
<head>
<title>Insert Before Method Example</title>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
// Get the parent node
var list = document.getElementById("myList");
// Create a new element node
var newItem = document.createElement("li");
var textNode = document.createTextNode("Item 0");
newItem.appendChild(textNode);
// Insert the new element node before the first child node
list.insertBefore(newItem, list.childNodes[0]);
</script>
</body>
</html>
Output:
How insertBefore() function works
Answer: Here is how it works:
- Get the parent element: First, you need to get the parent element of the existing element and the new element that you want to insert. You can use the
document.getElementById()method or other methods to get the parent element. - Create the new element: Next, you need to create the new element that you want to insert before the existing element. You can use the
document.createElement()method to create the new element. - Create the content for the new element: If you want the new element to have any content, you can create a text node or other element nodes and add them to the new element using the
appendChild()method. - Insert the new element: Finally, you can use the
insertBefore()method to insert the new element before the existing element. TheinsertBefore()method takes two arguments: the first argument is the new element that you want to insert, and the second argument is the existing element before which you want to insert the new element.
Another example
For example, if you have an HTML document with the following elements:
<div id="parent">
<p id="existing">This is an existing paragraph.</p>
</div>
You can use the insertBefore() method to insert a new paragraph element before the existing paragraph element like this:
var parent = document.getElementById("parent");
var existing = document.getElementById("existing");
var newElement = document.createElement("p");
var textNode = document.createTextNode("This is a new paragraph.");
newElement.appendChild(textNode);
parent.insertBefore(newElement, existing);
Here’s a complete example.
<!DOCTYPE html>
<html>
<head>
<title>Insert Before Example</title>
</head>
<body>
<div id="parent">
<p id="existing">This is an existing paragraph.</p>
</div>
<script>
// Get the parent element and the existing element
var parent = document.getElementById("parent");
var existing = document.getElementById("existing");
// Create a new paragraph element
var newElement = document.createElement("p");
// Create a text node with the content for the new element
var textNode = document.createTextNode("This is a new paragraph.");
// Add the text node to the new element
newElement.appendChild(textNode);
// Insert the new element before the existing element
parent.insertBefore(newElement, existing);
</script>
</body>
</html>
Comment if you have any doubts or suggestions on this JS HTML DOM Element insertBefore Method.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version