Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Dynamic Content with DOM-2 (Part I of II)
Pages: 1, 2, 3

More Node Manipulations

You can remove existing nodes as well as add new ones. The removeChild method allows any node to remove one of its child nodes. Simply pass a reference to the node you wish to remove. Any text or elements within the node being removed will be removed along with it.



The text between these bold tags will disappear when the B element is removed from the paragraph.

<script type="text/javascript">
function removeBElm(){
    var para = document.getElementById("example2");
    var boldElm = document.getElementById("example2B");
    var removed = para.removeChild(boldElm);
}
</script>

Click this link to see the above script in action.

Nodes that are removed are not destroyed. removeChild returns a reference to the node that was removed so additional manipulations can be made with it later. In the example above, notice that we've assigned the removed B element to the removed variable, thus maintaining a reference to it.

Depending on the browser implementation, you may get errors if you try to remove a non-existent node or one that has been marked as read-only.

Replacing Nodes

In addition to removing nodes, the DOM offers a way to replace one node with another. The replaceChild method accomplishes this. As with removeChild above, replaceChild needs to be called from the element that contains the node you wish to replace.

replaceChild takes two arguments: a reference to the new node, and another to the node being replaced. The following example creates a new SPAN element containing a text node, and uses it to replace an existing SPAN.

<script type="text/javascript">
function replaceSpan(){

    var newSpan = document.createElement("span");
    var newText = document.createTextNode("on top of the astounded zebra");
    newSpan.appendChild(newText);

    var para = document.getElementById("example3");
    var spanElm = document.getElementById("ex3Span");
    var replaced = para.replaceChild(newSpan,spanElm);
}
</script>

You can try this example here:

The quick brown fox jumps over the lazy dog.


Inserting Nodes in a Sequence

You may have noticed in the previous examples that appendChild always places the newly appended node as the very last child of the parent node. There are times when it is desirable to insert a node before or in-between existing child nodes.

The insertBefore node method provides a way of accomplishing this. insertBefore takes two arguments: the new node to insert and the node you wish to have prepended. The following example uses insertBefore to insert a new TD element before the third existing TD in an HTML table.

<table border="1">
  <tr id="example4">
    <td>TD One</td>
    <td>TD Two</td>
    <td>TD Three</td>
  </tr>
</table>

<script type="text/javascript">

var TDCount = 0;

function insertTD(){

  var newTD = document.createElement("td");
  var newText = document.createTextNode("New Cell " + (TDCount++));
  newTD.appendChild(newText);

  var trElm = document.getElementById("example4");
  var refTD = trElm.getElementsByTagName("td").item(2);
  trElm.insertBefore(newTD,refTD);
  
}
</script>

You can try this example here:

TD One TD Two TD Three


The Road Ahead

We've covered how DOM-2 makes generating on-the-fly HTML and manipulating page elements extremely simple, but you may be looking for more power. This article doesn't cover how to affect attributes of elements, like table cell widths, background colors, and so forth. In the next article, you'll see how DOM-2 can be used to manipulate the attributes of elements and create dynamic effects. You will also see some additional methods and properties of the node and element interfaces that provide easier references to objects in the DOM tree.

Scott Andrew LePera lives in San Francisco, where he ekes out a schizoid existence as both a web applications developer for KnowNow and a frustrated urban folk singer.


Return to the JavaScript and CSS DevCenter.