JavaScript insertBefore

The JavaScript insertBefore () is a method that is used for inserting a child node before another node of a specified parent node.

In this section, we will learn about the insertBefore () method and look at an example to understand the implementation of the insertBefore () method.

JS insertBefore() method

If we want to add a node (child node) before another node of a parent node, the insertBefore() method is used.

Syntax

In the above syntax, the parentNode is the specified parent node where the new child node will be inserted. Here, newNode signifies the node that is going to be inserted before another node and the existingNode signifies the node before which the new child node will get inserted. In case, if the existing node value is null that is it does not exist, the new node gets inserted at the end of the parentNode's child nodes.

How insertBefore() function works

The method follows the below steps:

Firstly, the method searches for the specified parent node in the code.
Then, it looks for the existing node value, whether found in the parent node.
The method returns null if no existing node is found before which the user wish to insert a new node.
Next, if the existing node is available in the specified parent node, the method inserts the new node before the existing node and returns the inserted child node.

Example of insertBefore() Method

Below is an example code that will help us to understand the working of insertBefore() method:

<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript insertBefore() method</title>
</head>
<body>
    <ul id="weeks">
                      <li>Sunday</li>
                      <li>Monday</li>
                      <li>Wednesday</li>
		<li>Thursday</li>
		<li>Friday</li>
		<li>Saturday</li>
    </ul>
    <script>
        let x = document.getElementById('weeks');
        let add = document.createElement('li');
        add.textContent = 'Tuesday';
         //as we need to insert before 4th element
        weeks.insertBefore(add, x.childNodes[4]);
    </script>
</body>
</html>

The output of the above code is shown below:

In the above code:

The above code is html and JavaScript based code:

First, we have created an unordered list with an id ="weeks" given to it. The list contains some items enclosed within the <li> element.

In the <script> section, we have fetched the <ul> id initially, and then we have created a new child element which is to be added in the parent node. Here, the parent node is the <ul>, and the list items contained within it are its child elements. Also, this new node is the value of newNode
Then we have provided a value as "Tuesday" to the created new node.
Finally, we have used the insertBefore () method to find the specified parent node in the code and then searched for the specified existing child element whether present in the code within the parent node that is specified.
Next, it successfully found the existing list item (child node) in the unordered list, so it puts the new child node value, i.e., the new list item, before the existing child node value.
At last, the insertBefore () method will return the list item value, which has been placed as the newNode value.
However, if we try and put a non-existing node value in the method, the method will again search for the value, but no such value will exist. Thus, it will return null.

So, in this way, we can insert a child node in the specified parent node and insert the new node before the existing child node.

Next TopicJavaScript Select Option

← prev next →