Introduction to the Document Object Model
Review the W3C DOM2 standard recommendation.Using the techniques discussed so far, you should be fairly dangerous. You've seen how you can dynamically access and alter just about any property or style parameter of every element on a page.
But what about dynamically adding and removing elements and content? Or changing the content itself?
Dynamic Content
Changing textual content is relatively simple. Every continuous string of
character data in the body of an HTML page is represented by a text node. The
nodeValue
property of these nodes is the text itself. Changing
that value will change the text on the page.
Text Nodes
Here's another example using a simple paragraph tag. Use the links to change the text:
This is the initial text.
Now look at the code behind it:
<p id="sample1">This is the initial text.</p> ... code for the links ... document.getElementById('sample1').firstChild.nodeValue = 'Once upon a time...'; document.getElementById('sample1').firstChild.nodeValue = '...in a galaxy far, far away';
There are a couple of important things to note here. First, text nodes do
not have an ID attribute like element nodes can. So they cannot be accessed
directly using methods like document.getElementById()
or
document.getElementsByTagName()
.
Instead, the code references the text using the parent node, in this case it's the paragraph element with the ID "sample1". This element node has one child node, the text node we want to update. You can see this in the diagram below.

So document.getElementById('sample1').firstChild.nodeValue
is
used to access this text node and read or set its string value.
It's important to remember that text nodes contain just that, text. Even simple markup tags like B or I within a string of text will create a sub tree of element and text nodes. For example, using the example above and adding tags make the word "initial" bold:
<p id="sample2">This is the <b>initial</b> text.</p>
now gives the "sample2" paragraph element three children instead of one. There is a text node for "This is the ", an element node for the B tag pair and a text node for " text.". The node for the B element has one child node, a text node for "initial". You can see the structure in the diagram below.

To see how this affects scripting code, here's the same example used above but with the additional bold markup:
This is the initial text.
Changing firstChild
of the P element now only affects the
text "This is the ". Conversely, if you attempt to add markup to the value of
a text node, the browser will treat it as plain text, as demonstrated
below:
This is the initial text.
Where the link code has been changed to this:
document.getElementById('sample3').firstChild.nodeValue = '<b>Once</b> upon a time...'; document.getElementById('sample3').firstChild.nodeValue = '...in a galaxy <i>far, far</i> away';
You can avoid problems like this by thinking of text nodes as individual strings of character data located between any two HTML tags, not necessarily matching pairs of tags.
innerHTML
Property
Internet Explorer introduced the innerHTML
property to the
element node. It represents the character data between an element's starting
and ending tag, including other HTML tags Netscape 6 has adopted this feature,
even though it's not part of the current DOM standard.
Using this feature, you could replace the entire contents of the sample paragraph element above, including the HTML markup, using something like:
document.getElementById('sample4').innerHtml = "<b>Once</b> upon a time...";
And you can see the effect for yourself, if you're using a browser that supports it:
This is the initial text.
While handy, keep in mind that it is not part of the standard, so use it at your own risk.Adding Nodes
Nodes can also be added to the DOM. You've already seen how attribute nodes
can be created and applied to an element so let's look at adding element and
text nodes within the document tree (without using the innerHTML
property).