DEV Community

Cover image for JavaScript replaceWith – how to use it
Amer Sikira
Amer Sikira

Posted on • Originally published at webinuse.com

JavaScript replaceWith – how to use it

This text was originally published at webinuse.com.
I remember the time when JavaScript was not this good. We had to use libraries and frameworks, like jQuery, to do some basic stuff much easier. I remember the time when JavaScript replaceWith – like functions and methods were just a dream.

There are times when we need to remove one element and replace it with another one. I will show two of the most common ways.

<div id="parent">
    <div id="child"></div>
</div>

<script>
    /**
     * First way we can replace one element with another is by changing .innerHTML of a parent element
    **/

    document.querySelector("#parent").innerHTML = <code><div id="another-child"></div></code>;

    //Result
    /*
        <div id="parent">
            <div id="another-child"></div>
        </div>
    */

    /**
     * Another way is by removing child add adding another child using createElement
    **/

    let parent = document.querySelector("#parent");
    let oldChild = document.querySelector("#child");
    let newChild = document.createElement("div");
    newChild.setAttribute("id", "another-child");
    parent.removeChild(oldChild);
    parent.appendChild(newChild);
    //Result
    /*
        <div id="parent">
            <div id="another-child"></div>
        </div>
    */

</script>
Enter fullscreen mode Exit fullscreen mode

Here is where JavaScript comes to the rescue with the replaceWith() method. According to MDN: The Element.replaceWith() method replaces this Element in the children list of its parent with a set of Node or DOMString objects. DOMString objects are inserted as equivalent Text nodes.

This means that we can use createElement method to create a new element(s), but if we use DOMString, JavaScript will interpret it as text, not as an element node.

<div id="parent">
    <div id="child"></div>
</div>

<script>
//Let's create element using createElement method
    let parent = document.querySelector("#parent");
    let oldChild = document.querySelector("#child");
    let newChild = document.createElement("div");
    newChild.setAttribute("id", "another-child");
    oldChild.replaceWith(newChild);
    //Result
    /*
        <div id="parent">
            <div id="another-child"></div>
        </div>
    */

    let parent = document.querySelector("#parent");
    let oldChild = document.querySelector("#child");
    let newChild = <code><div id="another-child"></div></code>;
    oldChild.replaceWith(newChild);

    //Result
    /*
        <div id="parent">
            This is shown as text in browser -> <div id="another-child"></div>
        </div>
    */
</script>
Enter fullscreen mode Exit fullscreen mode

If you have any questions or anything you can find me on my Twitter, or you can read some of the older articles like Handling HTML form security

Top comments (0)