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.
var para = document.getElementById("example2");
var boldElm = document.getElementById("example2B");
var removed = para.removeChild(boldElm);
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.
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.
var newSpan = document.createElement("span");
var newText = document.createTextNode("on top of the astounded zebra");
var para = document.getElementById("example3");
var spanElm = document.getElementById("ex3Span");
var replaced = para.replaceChild(newSpan,spanElm);
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.
var newTD = document.createElement("td");
var newText = document.createTextNode("New Cell " + (TDCount++));
var trElm = document.getElementById("example4");
var refTD = trElm.getElementsByTagName("td").item(2);
You can try this example here:
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.