14.10 Creating Text Content for a New Element

NN 6, IE 5

14.10.1 Problem

You want to use scripts to generate a portion of body content after the page loads.

14.10.2 Solution

Use the W3C DOM text node-creation method of the document object. The sole parameter is the string of text content destined for an element container:

var txt = document.createTextNode("My dog has fleas.");

You can now append or insert this text node as a new child node of any element node, including an element node that has been created but not yet inserted into the document tree.

14.10.3 Discussion

A typical sequence for creating both a new element and its text content is as follows:

var elem = document.createElement("p");
var txt = document.createTextNode("My dog has fleas.");
elem.appendChild(txt);
document.body.appendChild(elem);

The amount of nesting required for some combinations of elements and text can get somewhat complicated, but the principles are the same throughout. For example, the following sequence creates a p element with a sentence containing an em element:

var myEm, myP, txt1, txt2;
myEm = document.createElement("em");
txt1 = document.createTextNode("very");
myEm .appendChild(txt1);
myP = document.createElement("p");
txt1 = document.createTextNode("I am ");
txt2 = document.createTextNode(" happy to see you.");
myP.appendChild(txt1);
myP.appendChild(myEm);
myP.appendChild(txt2);
document.body.appendChild(myP);

The result of the previous sequence is an element whose HTML looks like the following:

<p>I am <em>very</em> happy to see you.</p>

You may create any combination of elements and text nodes, provided the result is well-formed HTML, a prospect that is nearly irrevocably enforced by the way node insertion methods work in the W3C DOM. In fact, you could conceivably append two text nodes next to each other. To the user, they would be rendered as one continuous string of text; to the document tree, they are siblings of the same node type (3). If you prefer to combine sibling text nodes into a single node, invoke the normalize( ) method on their parent containing element.

Internet Explorer 4 introduced two text-based properties of element objects that have gained wide usage in web development for that browser family: innerText and innerHTML. These two read/write properties let you assign a string of unmarked up text or text with HTML tags to the interior of an element container, respectively. If the text contains tags, assignment to the innerHTML property forces the browser to interpret the tags as if they were in the delivered page source code; assignment to the innerText property treats the contents as literal text, meaning that the angle brackets, tag name, and attributes are also rendered for users. This string-based approach to document modification is used by the IE-only document object model (in contrast to the W3C DOM node-based model).

Web content authors have found these properties so practical over the years that the Mozilla designers relented in their predominantly strict adherence to W3C DOM precepts just enough to implement the innerHTML property. This convenience property saves coding because you don't have to go through the text node creation process. For example, the W3C DOM sequence:

var txt = document.createTextNode("My dog has fleas.");
document.getElementById("myP").appendChild(txt);

can be reduced to:

document.getElementById("myP").innerHTML = "My dog has fleas.";

The innerText element is not supported by Mozilla.

14.10.4 See Also

Recipe 14.9 for creating a new (empty) element of any tag type; Recipe 14.11 for using the DocumentFragment object as a temporary container of element and text nodes during assembly.