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.
|