The ability to manipulate and modify components within the DOM is critical in web development. JavaScript has numerous useful methods for accomplishing this, one of which is “replaceChild”. This useful approach enables developers to replace an existing child element with a new one, making it an essential tool for dynamic content updates that enhance user experiences.

This post will explain the JavaScript replaceChild() method.

What is “replacechild” in JavaScript?

The “replaceChild” is a JavaScript method used for replacing a child node of a specified parent element with a new node. It is typically used when you want to update or replace/swap an existing element in the DOM with a new element. It accepts two arguments, the new node to insert and the existing node/element to replace.

Syntax

The given syntax is used for the replaceChild() method:

parentNode.replaceChild(newNode, oldNode);

Example
In the given example, we will create a <p> tag that will replace the new element:

<div id="myDiv"> 
<p id="oldData">JavaScript is the Programming Language for the Web.</p> 
</div>

Output

In the JavaScript file or the <script> tag, first, we will access the elements “div” and “p” using the “getElementById()” method where we will replace the element “<p>”:

var parentNode = document.getElementById("myDiv");

var oldNode = document.getElementById("oldData");

Now, we will create a new paragraph element using the “createElement()” method:

var newNode = document.createElement("p");

Set the content to the “p” element using the “textContent” attribute:

newNode.textContent = "JavaScript is a scripting language that allows you to generate dynamically updating data, manipulate multimedia, animate graphics, and do a lot more.";

Now, call the “replaceChild()” method and pass the new element and the old element as arguments to replace the old node with the new node:

parentNode.replaceChild(newNode, oldNode);

The output shows that the content has been successfully updated with the new node’s text:

Similarly, you can update the list elements using the “replacechild()” method.

Example

In the following example, we will update the value first element of the list by clicking on the button:

<button onclick="changeList()">Click Here! </button>

Create an unordered list of languages:

<ul id="list"> 
<li>C</li> 
<li>Java</li> 
<li>HTML</li> 
<li>CSS</li> 
<li>JavaScript</li> 
</ul>

Define a function “changeList()” in the <script> tag or a JavaScript file that will call on the button’s click. In the function, first, we will access the list using the “getElementById()” method. Then, set the new value with the help of the “createTextNode()” method. Finally, we will call the “replaceChild()” method to replace the old value of the first item in the list with the new value:

function changeList() { 
const firstListItem = document.getElementById("list").children[0]; 
const new1FirstListItem= document.createTextNode("C++"); 
firstListItem.replaceChild(new1FirstListItem, firstListItem.childNodes[0]);

}

As you can see, the value of the first item of the list “C” has been successfully updated with the new value “C++”:

That’s all about replaceChild in JavaScript.

Conclusion

The “replaceChild” is a powerful JavaScript method for manipulating DOM by replacing specific child nodes within HTML elements with new nodes or values. It is commonly used for replacing existing elements with new ones. This post explained the JavaScript replaceChild() method.