Modifying Text Within a Page

Next, you can create a simple script to modify the contents of a heading within a web page. As you learned earlier in this chapter, the nodeValue property of a text node contains its actual text, and the text node for a heading is a child of that heading. Thus, the syntax to change the text of a heading with the identifier head1 would be the following:

var head1 = document.getElementById("head1");
head1.firstChild.nodeValue = "New Text Here";

This assigns the variable head1 to the heading’s object. The firstChild property returns the text node that is the only child of the heading, and its nodeValue property contains the heading text.

Using this technique, it’s easy to create a page that allows the heading to be changed dynamically. Listing 15.7 shows the complete HTML document for this script.