JavaScript replaceWith() Method

Introduction

JavaScript is the language for the web, especially for its ability to manipulate the Document Object Model (DOM) that guides how things are rendered within a browser. Everything on the webpage is an element and serves as the base upon which all elements objects inherit, and for HTML elements specific, the HTMLElement interface suffice.

These elements have properties and methods, and one such methods is the replaceWith method. The replaceWith method allows us to replace the element it’s called upon in the children list of its parent with a set of Node or String objects (or equivalent Text node).

In this article, we will discuss how to use JavaScript replaceWith method and uses it for DOM manipulation.

Using JavaScript `replacewith` method to manipulate DOM

With a typical syntax structure as below, the replacewith method allows us to replace elements by directly referencing the child nodes where Element is the element/node to be replaced and the Node is the element/node that will replace the element/node.

Element.replacewith(Node);
Element.replacewith(Node1, Node2);

Also, you can replace it with multiple elements/nodes.

To illustrate how JavaScript replacewith method, we will display paragraph text and change the text using the method. All the HTML and JS will be written together using the script tag.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>JavaScript replacewith</h1>
        <div id="demo">
            <p>This text will be replaced by a button click event</p>
        </div>
        <button id="btn">Change Text with replacewith</button>

        <script>
            document.getElementById("btn").onclick = function () {
                const pTag = document.querySelector("#demo p");
                const newNode = document.createElement("input");
                newNode.value =
                    "Replacement text replaced by the button click event";
                pTag.replaceWith(newNode);
            };
        </script>
    </body>
</html>

Output

After we click the button to trigger the replacewith method, we have the below image.

In the HTML code, we added the demo and btn id (identifier) to the div and button elements to make the JavaScript code know which element to work with.

However, in the JavaScript code, we find and reference the paragraph tag by using the querySelector method and bind it to pTag binding. Afterward, we can create a new element (newNode) that will replace the referenced element and bind a value to it. Finally, we make use of the replacewith method on pTag (the referenced value) and newNode (the new node).

Also, we can add multiple nodes by adding new elements or nodes to the arguments of the replacewith method. To do such, we can replace the code with the replacewith method expression below. We can also create new elements too.

pTag.replaceWith(newNode, "added node text");

Output

Summary

To make use of the JavaScript replacewith method, we need to reference the element/node that we want changed and add the new element/node as an argument. Also, we can add multiple nodes or elements via the replacewith method.