New Nodes

by Ryan Frishberg

Beyond working with existing nodes and their methods and properties (hasChildNodes(), innerText, children, etc.), we can also create new nodes.

document.createElement(tagName) creates a new element node with the specified tagName. It's amazing...you can create it just out of thin air...neat, huh? It accepts one argument, the tagName to create. Here's an example:
newSPAN = document.createElement("SPAN");
Notice that createElement() can only be run from the "document," and that you should store this new element node in a variable.

Later, we'll learn what to do with this new element and how to append (or insert) it into the document.

document.createTextNode(text) creates a new text node. It takes one argument, the "text" for the text node. Here's an example:
newText = document.createTextNode("This is the new text");
Note that this doesn't accept HTML, but only text (In other words, HTML tags will be interpretted literally--just as regular text).

Now, let's learn how to insert this text node and the new element we just created.

Insert Nodes into document

appendChild(newNode) inserts the new node to the end of the list of children of the node where this is run from. Take a look at the example if I've already lost you. It takes on argument, the new node to append. I know that it sounds difficult, but it's not. Here's an example, but first, we'll need some elements, so we can insert our new node after them.

            newSPAN.appendChild(newText);
            document.getElementById("div1").appendChild(newSPAN);
            alert(document.getElementById("div1").lastChild.nodeName);

What we've done is we've appended the text node as the last child of the newSPAN node. Then, we've appended the newSPAN node as the last child of the div1 node. Now, it generates an alert message of "SPAN," whereas before we appended the new element node, we'd have gotten an alert message of "#text." Also note that we appended the text node we created to the <span> tag before in turn appending that <span> tag to "div1" in the document. We could have appended the <span> tag and then appending the text node to it if we wanted to, like so:

            document.getElementById("div1").appendChild(newSPAN);
            document.getElementById("div1").lastChild.appendChild(newText);
            alert(document.getElementById("div1").lastChild.nodeName);

insertBefore(newNode, beforeNode) is similar to appendChild() except, instead of automatically inserting the new node as the last child, it will insert the new node before another one you specify. So, it accepts two arguments:

The new node to insert
The node to "insert it before"

So, in our previous example, let's say we wanted a new element, "SPAN2", directly before our "SPAN1"element. First, we must create the new element node:
SPAN2 = document.createElement("SPAN");
Now, we must access the "SPAN1" element to tell it to insert it before (there are numerous ways, but we'll only examine and use on of them):
SPAN1 = document.getElementById("div1").lastChild
From there, we can use the insertBefore() method to append it to the appropriate place:
document.getElementById("div1").insertBefore(SPAN2,SPAN1);
or
document.getElementById("div1").insertBefore(SPAN2,document.getElementById("div1").lastChild);
or
document.getElementById("div1").insertBefore(document.createElement("SPAN"),document.getElementById("div1").lastChild);
Also note that I called the insertBefore() method from the parent node of where I wanted to insert it before, because that is the node whose child list I am changing. Got it?

Dolly

cloneChild(node) is a function that copies and returns a node. It accepts one argument, whether to copy "deep." I'll explain this in the following example:

      <body>
            <div id="div1">
                  <span id="span1">This is the text of SPAN1</span>
                  <span id="span2">This is the text of SPAN2</span>
                  This text is not in a span tag.
            </div>
      </body>

Now, let's say we go:
div2=document.getElementById("div1").cloneNode(false)
It just copies <div id="div1"></div>, and it copies nothing between. Note that it copies the attributes of the node, also. Now, we can add attributes, remove attributes, add children, remove children, append that node anywhere on the document, etc....
Now, if we had run div2=document.getElementById("div1").cloneNode(true), it would copy the child nodes of "div1", and it would copy:

      <div id="div1">
            <span id="span1">This is the text of SPAN1</span>
            <span id="span2">This is the text of SPAN2</span>
            This text is not in a span tag.
    </div>

If we don't define the "deep" argument as false or true, it is automatically false. Now, once a node is cloned, we could change it's attributes, child nodes, append it, etc...

Disappear...

removeChild(node) removes the node passed by it's sole argument. Note that this method (just like the others mentioned here) is run from the parent of the node you want to remove. Example:

Now, we run: document.getElementById("div1").removeChild(document.getElementById("span2")), and it removes the "span2" node and its child nodes, leaving our document looking like:

replaceChild(newChildNode, oldChildNode) replaces the oldChildNode node with the newChildNode node. Example:

Now, we run:

            newSPAN = document.createElement("SPAN");
            newSPAN.setAttribute("id","span2");
            newSPAN.setAttribute("align","center");
            newText = document.createTextNode("This is the text of SPAN2");
            newSPAN.appendChild(newText);
            div1 = document.getElementById("div1");
            div1.replaceChild(newSPAN,div1.firstChild);

and now, our changed document looks like:

Those are the major methods and properties of the W3C DOM Level 1 (the Consortium's first Document Object Model recommendations). Let's look briefly at some aspects of W3C DOM Level 2.

Next -->