replaceChild()

replaceChild() method accepts two arguments:

the node to insert
the node to replace

The node to replace is returned

replace first child

 
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <p id="p1">Hello <b>World!</b></p>
        
        
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var p = document.getElementById("p1");
               
               var returnedNode = div.replaceChild(p, div.firstChild); 
               document.writeln(returnedNode);

        </script>
    </body>
</html>

Click to view the demo

Replace last child

 
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <p id="p1">Hello <b>World!</b></p>
        
        
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var p = document.getElementById("p1");
               
               var returnedNode = div.replaceChild(p, div.lastChild); 
               document.writeln(returnedNode);

        </script>
    </body>
</html>

Click to view the demo

A node removed via replaceChild() is still owned by the document but doesn't have a specific location in the document.

Home
JavaScript Book
DOM

DOM Model: