Table of Contents
One common DOM manipulation task is replacing elements in the DOM. In this article, we will discuss two methods for replacing elements in the DOM: the
replaceChild() method and the
Method-1: Using the
replaceChild() method to replace element
The replaceChild() method is used to replace a child node in a parent node. It takes two arguments: the new node to be added and the old node to be replaced.
Here is the syntax for the
replaceChild() method to replace element in DOM.
Before we go into the example to illustrate how the
replaceChild() method works, we need to understand that we will need the
createElement() to create the new node or element we need to replace the element in the DOM.
createElement() can be seen below
Now, we can replace elements using the
createElement() method. To illustrate the process to replace an element or node, we will create a simple HTML page and replace the heading with a new heading text and add a class name to the new element created.
let oldNode = document.getElementById("old"); let newNode = document.createElement("h1"); newNode.className = "new-heading"; newNode.innerHTML = "DOM Manipulation and Element Replacement"; let parentNode = oldNode.parentNode; parentNode.replaceChild(newNode, oldNode);
In the code, we obtain the element we want to replace with the
getElementById() method and create the element we want to add with the
createElement() method. Afterwards, we assign a new class using the
className property and add new content to the newly created element
newNode. Then, we reference the new element/node to the old node and apply the
replaceChild() method to replace the old node/element.
Method-2: Using the
replaceWith() method to replace element
replaceWith() method is a more modern and concise way to replace an element in the DOM. It is available in modern browsers and can be used as an alternative to
replaceChild(). The method works pretty much like the
replaceChild() method. It replaces the element in the children list of its parent with a set of Node or string objects.
Here is the syntax to use the
Similarly, we need to use the
createElement() method to create the element we are going to add to replace the old element. Then, we use the
replaceWith() method to replace the element. To illustrate this, we will replace the second list item - replaceWith() - within the HTML page in the previous section with a new text -
Wow - replaceWith() is amazing.
script.js file would go thus;
let oldNode = document.querySelectorAll("li"); let newNode = document.createElement("li"); newNode.className = "new-list"; newNode.innerHTML = "Wow - replaceWith() is amazing"; oldNode.replaceWith(newNode);
In the code, we use a different DOM selector method - querySelectorAll - to obtain all the
li element, and since we know the order of the
li element with the text we want to replace, we can select it with the bracket notation. Then, we apply a class name and innerHTML property and use the
In this article, we discussed two methods for replacing elements in the DOM: the
replaceChild() method and the
replaceWith() method. Both methods allow you to replace an element in the DOM, but the
replaceWith() method is more modern and concise.
When replacing elements in the DOM, it's important to understand the difference between the two methods and choose the one that best fits your needs. Whether you're using the
replaceChild() method or the
replaceWith() method, being able to replace elements in the DOM is a powerful tool for adding interactivity to web pages and improving user experience.