Replace a DOM Element with Another DOM Element Using JavaScript

Last Updated : 10 Sep, 2026

To replace one DOM element with another in JavaScript, you can use the replaceChild() method. This method replaces an existing child element with a new element while keeping the new element in the same position in the DOM.

Approach 1: Using replaceChild() Method

The replaceChild() method replaces an existing child node with a new node. It is called on the parent element and accepts the new element and the element to be replaced as arguments.

Syntax:

parentNode.replaceChild(newNode, oldNode);

Example: In this example, a new <span> element replaces the existing <a> element when the button is clicked.

html 
<!DOCTYPE html>
<html>

<head>
    <title>Replace a DOM Element</title>
</head>

<body style="text-align: center;">

    <h1>GeeksforGeeks</h1>

    <p id="message">
        Click the button to replace the link.
    </p>

    <div>
        <a id="link" href="#">GeeksforGeeks</a>
    </div>

    <br>

    <button onclick="replaceElement()">
        Replace Element
    </button>

    <p id="result"></p>

    <script>
        function replaceElement() {
            const oldElement =
                document.getElementById("link");

            const newElement =
                document.createElement("span");

            newElement.textContent = "Replaced text!";

            oldElement.parentNode.replaceChild(
                newElement,
                oldElement
            );

            document.getElementById("result").textContent =
                "The <a> element was replaced with a <span> element.";
        }
    </script>

</body>

</html>

Output:

Approach 2: Replacing an Element with Another Element of the Same Type

You can also create a new element of the same type and replace the existing element. This is useful when you want to update the content or attributes of an element by replacing it completely.

Example: In this example, the existing <a> element is replaced with a new <a> element containing updated text.

html 
<!DOCTYPE html>
<html>

<head>
    <title>Replace a DOM Element</title>
</head>

<body style="text-align: center;">

    <h1>GeeksforGeeks</h1>

    <p>
        Click the button to replace the existing link.
    </p>

    <div>
        <a id="link"
           href="https://www.geeksforgeeks.org/">
            GeeksforGeeks
        </a>
    </div>

    <br>

    <button onclick="replaceLink()">
        Replace Link
    </button>

    <p id="result"></p>

    <script>
        function replaceLink() {
            const oldLink =
                document.getElementById("link");

            const newLink =
                document.createElement("a");

            newLink.textContent = "New GFG Link!";
            newLink.href =
                "https://www.geeksforgeeks.org/";

            oldLink.parentNode.replaceChild(
                newLink,
                oldLink
            );

            document.getElementById("result").textContent =
                "The old link was replaced with a new link.";
        }
    </script>

</body>

</html>

Output:

Comment

Explore