Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Insert a node as a child before an existing child in JavaScript?
In this article, we are going to learn how to insert a node as a chils before an existing chilin JavaScript with appropriate examples.
The Javascript has provided insertBefore() method to insert a node as a child before another child. If there are 2 lists we can shuffle the elements between them based on our requirement using the method insertBefore().
Let’s understand this concept better with the help of examples further in this article.
Syntax
The syntax to insert a node as a child before an existing child in JavaScript for insertBefore method is −
insertBefore(newNode, refNode);
Where,
newNode is the new node to be inserted.
refNode is the existing node before which newNode is inserted.
Example 1
This is an example program to insert a node as a child before an existing child in JavaScript using insertBefore() method.
<!DOCTYPE html>
<html>
<head>
<title>Insert a node as a child before an existing child in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a node as a child before an existing child in JavaScript using insertBefore()</h4>
<div id="main">
<p>Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
<p>The roots of education are bitter, but the fruit is sweet.</p>
</div>
<script>
// Create an element and add it to the node
var p_node = document.createElement("p");
var NodeEle = document.createTextNode("An investment in knowledge pays the best interest.");
p_node.appendChild(NodeEle);
//Inserting an element before an existing
var main_eles = document.getElementById('main');
main_eles.insertBefore(p_node, main_eles.children[1]);
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 2
This is an example program to insert a node as a child before an existing child in JavaScript using insertBefore() method.
<!DOCTYPE html>
<html>
<head>
<title>Insert a node as a child before an existing child in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a node as a child before an existing child in JavaScript using insertBefore()</h4>
<div id="main">
<p id="p1">Education is the passport to the future, for tomorrow belongs to those who prepare for it today.</p>
<p id="p2">The roots of education are bitter, but the fruit is sweet.</p>
</div>
<script>
// Create an element and add it to the node
var p_node = document.createElement("p");
var NodeEle = document.createTextNode("An investment in knowledge pays the best interest.");
p_node.appendChild(NodeEle);
//Inserting an element before an existing
/*The difference between previous example and this example is , we are using parentNode attribute to get the parent of the element we are referring to*/
var ele = document.getElementById('p2');
var parent = ele.parentNode;
parent.insertBefore(p_node, ele);
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 3
This is an example program to insert a node as a child before an existing child in JavaScript using insertBefore() method.
<!DOCTYPE html>
<html>
<head>
<title>Insert a node as a child before an existing child in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a node as a child from list 1 before a particular existing child in list 2 in JavaScript using insertBefore()</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li>Apple</li>
<li>Samsung</li>
<li>One plus</li>
</ul>
<p>List of Top Laptop Selling Companies</p>
<ul id="Laptop">
<li>Dell</li>
<li>HP</li>
<li>Lenovo</li>
</ul>
<script>
// Placing an element from list1 into list2
var ele = document.getElementById('Mobiles').firstElementChild;
var list = document.getElementById('Laptop');
list.insertBefore(ele,list.children[2]);
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 4
This is an example program to insert a node as a child before an existing child in JavaScript using insertBefore() method.
<!DOCTYPE html>
<html>
<head>
<title>Insert a node as a child before an existing child in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Insert a last child from list 1 to the end in list 2 in JavaScript using insertBefore()</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li>Samsung</li>
<li>One plus</li>
<li>Apple</li>
</ul>
<p>List of Top Laptop Selling Companies</p>
<ul id="Laptop">
<li>Dell</li>
<li>HP</li>
<li>Lenovo</li>
</ul>
<script>
// Moving the last child of list1 to the end of another list i.e. list2
var ele = document.getElementById('Mobiles').lastElementChild;
var list = document.getElementById('Laptop');
list.insertBefore(ele,null);
</script>
</body>
</html>
On executing the above code, the below output is generated.
After using insertBefore() method
562 Views
