Javascript DOM Node Manipulation

appendChild()

appendChild() adds a node to the end of the childNodes list.

It updates all of the relationship pointers in the newly added node, the parent node, and the previous last child in the childNodes list.

When complete, appendChild() returns the newly added node. Here is an example:

<!DOCTYPE html>
<html>
    <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>
        <!--from  w  ww .jav a  2 s  .c o m-->
        
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var p = document.getElementById("p1");
               
               var returnedNode = div.appendChild(p); 
               document.writeln(returnedNode == p); //true 
               document.writeln(div.lastChild == p); //true 


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

Click to view the demo

If the node passed into appendChild() is already part of the document, it is removed from its previous location and placed at the new location.

insertBefore()

insertBefore() accepts two arguments: the node to insert and a reference node. The node to insert becomes the previous sibling of the reference node and is ultimately returned by the method.

If the reference node is null, then insertBefore() acts the same as appendChild().

<!DOCTYPE html>
<html>
<body>
    <div id="div1">
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div><!--from   w  w w.  j a v a2 s  .  co  m-->
    <p id="p1">Hello <b>World!</b></p>
    
    
    <script type="text/javascript">
           var div = document.getElementById("div1");
           var p = document.getElementById("p1");
           

           //insert as last child 
           var returnedNode = div.insertBefore(p, null); 
           document.writeln(p == div.lastChild); //true 


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

Click to view the demo

Example

The following code inserts as the new first child.

<!DOCTYPE html>
<html>
<body>
    <div id="div1">
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </div><!--from  w w  w.ja  va 2 s  . com-->
    <p id="p1">Hello <b>World!</b></p>
    
    
    <script type="text/javascript">
       var div = document.getElementById("div1");
       var p = document.getElementById("p1");
       
       //insert as the new first child 
       var returnedNode = div.insertBefore(p, div.firstChild); 
       document.writeln(returnedNode == p); //true 
       document.writeln(p == div.firstChild); //true 
    </script>
</body>
</html>

Click to view the demo

Example 2

The following code inserts before last child.

<!DOCTYPE html>
<html>
<body>
<div id="div1">
  <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
  </ul><!--from www.j  a  va 2  s  .  co m-->
</div>
<p id="p1">Hello <b>World!</b></p>


<script type="text/javascript">
   var div = document.getElementById("div1");
   var p = document.getElementById("p1");
   
   //insert before last child 
   var returnedNode = div.insertBefore(p, div.lastChild); 
   document.writeln(p == div.childNodes[div.childNodes.length-2]); //true

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

Click to view the demo

replaceChild()

replaceChild() method accepts two arguments:

the node to insert
the node to replace

The node to replace is returned

The following code replaces the first child from its parent.

<!DOCTYPE html>
<html>
    <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>
        <!--from   w  w w .j  a  v a2s  .c  o m-->
        
        <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

Example 3

Replace last child

<!DOCTYPE html>
<html>
    <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>
        <!--   w w  w  .  ja  v a 2  s .c o  m-->
        
        <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.

removeChild()

The removeChild() method removes a node. This method accepts a single argument, which is the node to remove. The removed node is returned:

The following code removes first child from its parent.

<!DOCTYPE html>
<html>
    <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>
        <!--   w  w w. j a  v  a  2  s . c  o m-->
        
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var p = document.getElementById("p1");
               
               var formerFirstChild = div.removeChild(div.firstChild); 
               document.writeln(formerFirstChild);

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

Click to view the demo

Example 4

The following code removes the last child.

<!DOCTYPE html>
<html>
    <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>
        <!--  w ww  .java 2 s . c om-->
        
        <script type="text/javascript">
               var div = document.getElementById("div1");
               var p = document.getElementById("p1");
               

               var formerLastChild = div.removeChild(div.lastChild); 
               document.writeln(formerLastChild);

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

Click to view the demo

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

Note

All four of these methods work on the immediate children of a specific node, meaning that to use them you must know the immediate parent node.

Not all node types can have child nodes, and these methods will throw errors if you attempt to use them on nodes that don't support children.