JavaScript insertBefore() Method

Sometimes we need to insert an element at a specific position, or we need to insert an element before any particular element. At that time we can use JavaScript insert before method.

The InsertBefore() Method

JavaScript insertBefore() method inserts a node at the specified position between HTML DOM elements.

Also Read: JavaScript appendChild() Method

Example

Let’s consider we need to insert an element at 2nd position in the list.

<!DOCTYPE html>
<html>
<head>
  <title>Errorsea - JavaScript Insert Before</title>
</head>
<body>

<ul id="languages">
  <li>Java</li>
  <li>PHP</li>
  <li>Python</li>
</ul>

<button onclick="insert()">Insert</button>

<script>
function insert() {
  var li = document.createElement("li");
  li.innerHTML = "JavaScript";

  var list = document.getElementById("languages");
  list.insertBefore(li, list.childNodes[2]);
}
</script>

</body>
</html>

Note: Here we take 3rd child node’s position to insert a node at 2nd position.

Explanation

  • First, we create a new <li> element using document.createElement() function.
  • Then we set it’s innerHTML value to “JavaScript”
  • Then we append newly created <li> element in the list at 2nd position.

Conclusion

I hope now you have a complete understanding of the insertBefore() method in JavaScript. The main use of the insertBefore() method is to insert an element at a specific position.

Enjoy Scripting 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *