How to use the JavaScript replaceChild method – Replace an existing element with another

This article explains how to use JavaScript’s replaceChild method to replace an element in an HTML document with another element.

How do I use the replaceChild method?

The replaceChild method is a method for replacing child nodes of a parent node. 
Specifically, specify the new element in the first argument and the existing element to replace in the second argument.

Explanation of replaceChild method

The replaceChild method is used to replace the child element of the specified parent element with a new element .

The basic syntax of the replaceChild method is as follows.

parentNode specifies the parent element of the element to be replaced. newNode represents the new element and oldNode represents the existing element to be replaced. Calling this method replaces the existing element with the new element.

How to replace existing element with replaceChild method

To use the replaceChild method, you must first obtain the parent element and the existing element to be replaced .

Below is an example of replacing an existing element with a new element. This code first gets the parent element and old element and creates a div element as a new element. Then call the replaceChild method to replace the old element with the new element.

const parent = document.getElementById("parent"); // Get parent element
const old = document.getElementById("old"); // Get the existing element to be replaced
const newElement = document.createElement("div"); // Create new element
parent.replaceChild(newElement, old); // Replace existing elements with new elements

This example first uses the getElementById method to retrieve the parent element and the existing element to replace. Next, we are creating a new element using the createElement method .

Finally, we are using the replaceChild method to replace the existing element with the new element.

Add attributes to a new element when replacing it with another element

When replacing an existing element with another　using the replaceChild method , you can also give attributes to the new element.

You can add attributes to new elements by using the setAttribute method .

Below is an example code that uses the setAttribute method to add a class attribute to a new element.

const parent = document.getElementById("parent"); // Get parent element
const old = document.getElementById("old"); // Get the existing element to be replaced
const newElement = document.createElement("div"); // Create new element
newElement.setAttribute("class", "new-class"); // Add class attribute to new elements
parent.replaceChild(newElement, old); // Replace existing elements with new elements

This example uses the setAttribute method to add a class attribute to a new element. This way you can add the attributes you want to the new element.

Summary of this article

We explained how to use the replaceChild method to replace an element in an HTML document with another element.

The replaceChild method is very useful when you want to dynamically change parts of the DOM in JavaScript!

The replaceChild method plays a very important role in manipulating the DOM in JavaScript. 
Also, if you want to change the position of an element, you must use the insertBefore method.

Make use of the replaceChild method correctly to create more user-friendly websites and applications.