JavaScript insertBefore

The insertBefore method in JavaScript is utilized to insert a child node prior to a specified existing node within a defined parent node.

In this segment, we will explore the insertBefore function and examine an example to grasp the practical application of the insertBefore function.

JS insertBefore method

To insert a child node prior to a specific node within a parent node, the insertBefore method is employed.

Syntax

Example


parentNode.insertBefore(newNode, existingNode);

In the syntax provided, parentNode refers to the designated parent node into which the new child node will be added. In this context, newNode represents the node intended for insertion prior to another node, while existingNode indicates the node before which the new child node will be placed. If the value of the existing node is null, meaning it does not exist, the new node will be appended to the end of the child nodes of parentNode.

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

Here is a sample code that will assist us in comprehending how the insertBefore method functions:

Example


<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.

Thus, we can add a child node to the designated parent node and position the new node prior to the existing child node.

JS insertBefore method

How insertBefore function works

Example of insertBefore Method

In the above code:

Input Required