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 🙂