Inserting and Appending Nodes

The Node object supports two useful methods for inserting content: insertBefore(newChild, referenceChild) and appendChild(newChild). In the case of appendChild(), it is invoked as a method of the node to which you wish to attach a child, and doing so adds the node referenced by newChild to the end of its list of children. In the case of the insertBefore() method, you specify which child you want to insert newChild in front of using referenceChild. In practice, you often have to access the parent node of the node you wish to run insertBefore() on to acquire the necessary references. Let’s see the appendChild() method in action, by using it to combine the two nodes that we create.

newNode = document.createElement('b'); newText = document.createTextNode("Something to add!");newNode.appendChild(newText);

At this point we would have this (X)HTML fragment:

<<b>>Something to add<</b>>

We could then add this markup into the document once we have found a convenient place to insert it. For example, we might use

current = document.getElementById('p1');current.appendChild(newNode);

to append the bold text fragment to the end of our test paragraph. The following example demonstrates a more complex use of insert and append that places user-entered text before, within, and after a specified element:

Note

If you have never seen DOM functionality before, you are highly encouraged to try this example yourself. You can type it in manually or find it online at the support site for this book, www.javascriptref.com.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>DOM Adding<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<script type="text/javascript">>
<<!--
function makeNode(str)
{
  var newParagraph = document.createElement("p");
  var newText = document.createTextNode(str);
  newParagraph.appendChild(newText);
  return newParagraph;
}

function appendBefore(nodeId, str)
{
 var node = document.getElementById(nodeId);
 var newNode = makeNode(str);
 if (node.parentNode)
   node.parentNode.insertBefore(newNode,node);
}

function insertWithin(nodeId, str) 
{
 var node = document.getElementById(nodeId);
 var newNode = makeNode(str);
 node.appendChild(newNode);
}

function appendAfter(nodeId, str) 
{
 var node = document.getElementById(nodeId);
 var newNode = makeNode(str);

 if (node.parentNode)
  { 
    if (node.nextSibling)
       node.parentNode.insertBefore(newNode, node.nextSibling);
    else
       node.parentNode.appendChild(newNode);
  }
}
//-->>
<</script>>
<</head>>
<<body>>
<<h1>>DOM Insert and Append<</h1>>
<<hr />>
<<div style="background-color:#66ff00;">>
  <<div id="innerDiv" style="background-color:#ffcc00;">><</div>>
<</div>>
<<hr />>
<<form id="form1" name="form1" action="#" method="get">>
  <<input type="text" id="field1" name="field1" />>
  <<input type="button" value="Before"
         onclick="appendBefore('innerDiv',document.form1.field1.value);" />>
  <<input type="button" value="Middle"
         onclick="insertWithin('innerDiv',document.form1.field1.value);" />>
  <<input type="button" value="After"
         onclick="appendAfter('innerDiv',document.form1.field1.value);" />>
<</form>>
<</body>>
<</html>>

Copying Nodes

Sometimes you won’t want to create and insert brand-new elements. Instead, you might

use the cloneNode() method to make a copy of a particular node. The method takes a single Boolean argument indicating whether the copy should include all children of the node (called a deep clone) or just the element itself. An example demonstrating cloning and inserting nodes is presented here.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>Clone Demo<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<</head>>
<<body>>
<<p id="p1">>This is a <<em>>test<</em>> of cloning<</p>>
<<hr />>
<<div id="inserthere" style="background-color: yellow;">>
<</div>>
<<hr />>
<<script type="text/javascript">>
<<!-- 
function cloneAndCopy(nodeId, deep)
{
 var toClone = document.getElementById(nodeId);
 var clonedNode = toClone.cloneNode(deep);
 var insertPoint = document.getElementById('inserthere');
 insertPoint.appendChild(clonedNode);
}
//-->>
<</script>>
<<form action="#" method="get">>
  <<input type="button" value="Clone"
         onclick="cloneAndCopy('p1',false);" />><<br />>
  <<input type="button" value="Clone Deep"
         onclick="cloneAndCopy('p1',true);" />>
<</form>>
<</body>>
<</html>>

Note

Because of the rules of (X)HTML, empty elements, particularly paragraphs, may not change the visual presentation of the document. The reason is that the browser often minimizes those elements that lack content.