Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Replace a child node with a new node in JavaScript?
In this article we are going to learn how to replace a child node with a new node in JavaScript with suitable examples.
To replace a child node with a new node, JavaScript provides two built-in DOM methods: replaceChild() and replaceWith(). Both methods allow you to swap an existing node with a new one in the DOM tree.
The methods replaceChild() and replaceWith() are supported by all modern browsers and are features of the DOM specification.
replaceChild() Method
The replaceChild() method is called on the parent element to replace one of its child nodes.
Syntax
parentNode.replaceChild(newNode, oldNode);
Parameters
newNode - The node to be inserted in place of the oldNode
oldNode - The existing node to be replaced
Return Value
This method returns the node that has been replaced (i.e., the oldNode).
Example 1: Replacing First List Item
This example replaces the first element of a list using replaceChild():
<!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 first item.</p>
<button onclick="replaceFunction()">Replace</button>
<script>
function replaceFunction() {
const list = document.getElementById("Cars");
const oldNode = list.firstElementChild; // Get first li element
const newNode = document.createElement("li");
newNode.textContent = "KIA";
list.replaceChild(newNode, oldNode); // Replace first item with KIA
}
</script>
</body>
</html>
Example 2: Replacing Last List Item
This example replaces the last element of a list:
<!DOCTYPE html>
<html>
<head>
<title>Replace a child node with a new node in JavaScript</title>
</head>
<body style="text-align: center;">
<h3>Replace last child node using replaceChild()</h3>
<ul id="Cars">
<li>Maruti</li>
<li>Hyundai</li>
<li>Toyota</li>
</ul>
<p>Click "Replace" to replace the last item.</p>
<button onclick="replaceFunction()">Replace</button>
<script>
function replaceFunction() {
const list = document.getElementById("Cars");
const oldNode = list.lastElementChild; // Get last li element
const newNode = document.createElement("li");
newNode.textContent = "KIA";
list.replaceChild(newNode, oldNode); // Replace last item with KIA
}
</script>
</body>
</html>
replaceWith() Method
The replaceWith() method is called directly on the element to be replaced. It's a more modern alternative to replaceChild().
Syntax
oldNode.replaceWith(newNode);
Example 3: Using replaceWith()
This example demonstrates the 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 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 first item.</p>
<button onclick="replaceFunction()">Replace</button>
<script>
function replaceFunction() {
const oldNode = document.getElementById("laptop").firstElementChild;
const newNode = document.createElement("li");
newNode.textContent = "Macbook";
oldNode.replaceWith(newNode); // Replace first item with Macbook
}
</script>
</body>
</html>
Comparison
| Method | Called On | Syntax | Browser Support |
|---|---|---|---|
replaceChild() |
Parent Element | parent.replaceChild(new, old) |
All browsers |
replaceWith() |
Element to Replace | old.replaceWith(new) |
Modern browsers |
Conclusion
Both replaceChild() and replaceWith() effectively replace DOM nodes. Use replaceWith() for cleaner syntax in modern browsers, or replaceChild() for broader compatibility.
3K+ Views
