JavaScript: The Definitive Guide, 6th Edition

Element Content

Take a look again at Figure 15-1, and ask yourself what the “content” of the <p> element is. There are three ways we might answer this question:

• The content is the HTML string “This is a <i>simple</i> document.”

• The content is the plain-text string “This is a simple document.”

• The content is a Text node, an Element node that has a Text node child, and another Text node.

Each of these are valid answers, and each answer is useful in its own way. The sections that follow explain how to work with the HTML representation, the plain-text representation, and the tree representation of element content.

Element Content As HTML

Reading the innerHTML property of an Element returns the content of that element as a string of markup. Setting this property on an element invokes the web browser’s parser and replaces the element’s current content with a parsed representation of the new string. (Despite its name, innerHTML can be used with XML elements as well as HTML elements.)

Web browsers are very good at parsing HTML and setting innerHTML is usually fairly efficient, even though the value you specify must be parsed. Note, however, that repeatedly appending bits of text to the innerHTML property with the += operator is usually not efficient because it requires both a serialization step and a parsing step.

innerHTML was introduced in IE4. Although it has long been supported by all browsers, it has only become standardized with the advent of HTML5. HTML5 says that innerHTML should work on ...