JavaScript replaceWith example

<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 = `<div id="another-child"></div>`;
    oldChild.replaceWith(newChild);
    
    //Result
    /*
        <div id="parent">
            This is shown as text in browser -> <div id="another-child"></div>
        </div>
    */
</script>