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
Replace a child node with a new node in JavaScript?
In this article we are going to learn how to replace a chils node with a new node in JavaScript with suitable examples.
To replace a child node with a new node, there is an inbuilt method to replace the new node with the old node within a given parent node. The inbuilt methods are – replaceChild(), replaceWith().
The methods replaceChild(), replaceWith() are supported by all modern browsers and also they are features of DOM Level1.
To understand this concept better, let’s look into the syntax and usage of replaceChild() and replaceWith() methods in JavaScript.
Syntax
The syntax for replaceChild() method is −
replaceChild(newNode,oldNode);
Where
newNode is the node to be inserted in place of the oldNode.
oldNode is the node to be placed.
This method returns the node that has been replaced. i.e., the oldNode.
Example 1
This is an example program to replace a child node (i.e., the old node which is the first element of a list) with a new node in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Replace a child node with a new node in JavaScript</title>
</head>
<body style="text-align: center;">
<h3>Replace a child node with a new node in JavaScript using replaceChild()</h3>
<ul id="Cars">
<li>Maruti</li>
<li>Hyundai</li>
<li>Toyota</li>
</ul>
<p>Click "Replace" to replace the item.</p>
<button onclick="replaceFunction()">"Replace"</button>
<script>
function replaceFunction() {
const old1 = document.getElementById("Cars").children[0]; // Selecting the 1st item in the list 'Cars'
const new1 = document.createTextNode("KIA");
old1.replaceChild(new1, old1.childNodes[0]); // Replacing the first child in the list 'Cars' with new1 element
}
</script>
</body>
</html>
On executing the above code, the following output is generated.
Example 2
This is an example program to replace a child node (i.e., the old node which is the last element of a list) with a new node in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Replace a child node with a new node in JavaScript</title>
</head>
<body style="text-align: center;">
<h3>Replace a child node with a new node in JavaScript using replaceChild()</h3>
<ul id="Cars">
<li id="car1">Maruti</li>
<li id="car2">Hyundai</li>
<li id="car3">Toyota</li>
</ul>
<p>Click "Replace" to replace the item.</p>
<button onclick="replaceFunction()">"Replace"</button>
<script>
function replaceFunction() {
const new1 = document.createElement("li");
new1.appendChild(document.createTextNode("KIA"));
const list = document.getElementById("Cars");
const old1 = list.lastElementChild; //Selecting the last child of the list 'Cars'
const parent = old1.parentNode;
parent.replaceChild(new1, old1); // Replacing the first child in the list 'Cars' with new1 element
}
</script>
</body>
</html>
On executing the above code, the following output is generated.
Example 3
This is an example program to replace a child node (i.e., the old node which is the first child of a list) with a new node in JavaScript using replaceWith() method.
<!DOCTYPE html>
<html>
<head>
<title>Replace a child node with a new node in JavaScript</title>
</head>
<body style="text-align: center;">
<h3>Replace a child node with a new node in JavaScript using replaceWith()</h3>
<ul id="laptop">
<li>Dell</li>
<li>HP</li>
<li>Lenovo</li>
<li>ASUS</li>
</ul>
<p>Click "Replace" to replace the item.</p>
<button onclick="replaceFunction()">"Replace"</button>
<script>
function replaceFunction() {
const old1 = document.getElementById("laptop").firstElementChild; // Selecting the first child in the list 'laptop'
const new1 = document.createTextNode("Macbook");
old1.replaceWith(new1); // Replacing the first child in the list 'laptop' with new1 element
}
</script>
</body>
</html>
On executing the above code, the following output is generated.
2K+ Views
