Previous Page
Next Page

Adding Nodes

The easiest way to learn about nodes is to start off by simply appending an element node (one which will contain a text node) to the end of your document. Scripts 12.1 and 12.2 allow the user to enter some data and click a button, and voila! a new paragraph is added to your page (Figure 12.2).

Script 12.1. This HTML creates the text area and submit button that allow the user to add a text node.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Adding Nodes</title>
     <script type="text/javascript" language="Javascript" src="script01.js">
     </script>
</head>
<body>
<form action="#">
     <p><textarea id="textArea" rows="5" cols="30"></textarea></p>
     <input type="submit" value="Add some text to the page" />
</form>
</body>
</html>

Figure 12.2. To add a node, enter the text in the field (top), and then click the button. The text appears on the page (bottom).

[View full size image]


To add nodes:

1. 
var newText = document.createTextNode (inText);



We start by creating a new text node (called newText) using the createTextNode() method, which will contain whatever text was found in textArea.

2. 
var newGraf = document.createElement ("p");



Next, we create a new element node using the createElement() method. While the node we're creating here is a paragraph tag, it could be any HTML container (div, span, etc.). The name of the new element is newGraf.

3. 
newGraf.appendChild(newText);



In order to put the new text into the new paragraph, we have to call appendChild(). That's a method of newGraf, which, when passed newText, puts the text node into the paragraph.

4. 
var docBody = document. getElementsByTagName("body")[0];



In order to add a new node into the body of our document, we need to figure out where the body is. The getElementsByTagName() method gives us every body tag on our page. If our page is standards-compliant, there should only be one. The [0] property is that first body tag, and we store that in docBody.

5. 
docBody.appendChild(newGraf);



And finally, appending newGraf onto docBody (using appendChild() again) puts the user's new text onto the page.

Script 12.2. With this script, the user can add any text they want to the page.

window.onload = initAll;

function initAll() {
     document.getElementsByTagName("form")[0]. onsubmit = function() {return addNode();}
}

function addNode() {
     var inText = document.getElementById ("textArea").value;
     var newText = document.createTextNode (inText);

     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);

     var docBody = document.getElementsByTagName ("body")[0];
     docBody.appendChild(newGraf);

     return false;
}

Tip

  • Wondering why you'd bother to go through all the hassle of creating a text node, creating an element node, and appending a child to each just to do what you could have done with a simple assignment to innerHTML? Here's one reason: with this approach, you cannot make your page invalid. For example, every <p> or <div> tag that's added is automatically closed. With innerHTML, on the other hand, it's very easy (almost too easy) to create tag soupand once you do, your page's DOM becomes difficult to work with. You can't read the contents of an element if it has a beginning but no ending tag, for instance.



Previous Page
Next Page