javascript

Creating Element or Text Nodes
CHAPTER 7 ■ TRAVERSING AND MODIFYING THE DOM TREE
Oftentimes, you will want to create Element or Text nodes with JavaScript and then insert them into the
DOM tree. Doing so is one way to dynamically add content to a web page.
One of the implications of DOM being defined with interfaces rather than classes is that you cannot,
for example, create an Element node by writing something like this:
var myLI = new Element("li");
Rather than creating DOM nodes with constructor functions, you do so with factory methods from
the Document interface. So let’s try that. Click Clear in both Firebug panels, and create an Element node,
say an , with the factory method Document.createElement():
var myLI = document.createElement("li");
That was pretty straightforward. Just pass Document.createElement() the tag name of the element as
a string, and this factory method returns a new Element node to you. But it’s blank; it has no attributes
other than defaults from the DTD. It contains no child nodes either. So, you have some work to do
before adding the to the DOM tree. Let’s tackle attributes first. You already know how—set id to
"blog" and class to "sprite":
var myLI = document.createElement("li");
myLI.id = "bebo";
myLI.className = "sprite";
Now it’s time for the children. The existing four elements have a child element with a child
Text node. That’s what you want this new to have, too. Create the first. Do it the same way as
you did the . Then add an href attribute with a value of "http://www.bebo.com".
var myLI = document.createElement("li"), myA = document.createElement("a");
myLI.id = "bebo";
myLI.className = "sprite";
myA.href = "http://www.bebo.com";
Now for the Text node. Like the element factory method, this one is defined by the Document
interface, too. But be wary, unlike the element factory method, the identifier for this one ends with Node:
createTextNode, not createText. Document.createTextNode() works with just one parameter, which is the
string of text you want the node to represent.
var myLI = document.createElement("li"),
myA = document.createElement("a"),
myText = document.createTextNode("Bebo");
myLI.id = "bebo";
myLI.className = "sprite";
myA.href = "http://www.bebo.com";
Now you have two Element nodes and one Text node floating around in the ether. How do you insert
those into the DOM tree? Well, every kind of node, yup all 12 of ’em, has three methods to do so:
Node.appendChild()
Node.insertBefore()
Node.replaceChild()
What do those do? The first one, Node.appendChild(), appends the node you pass to it to the end of
the childNodes array of the node you invoke it upon. Invoke Node.appendChild() on myA, passing myText
as the parameter:
var myLI = document.createElement("li"),
289