javascript

Chapter 10: The Document Object Model
The exact text returned from innerHTML differs from browser to browser. IE and Opera tend to convert
all tags to uppercase, whereas Safari, Chrome, and Firefox return HTML in the way it is specified in the
document, including white space and indentation. You cannot depend on the returned value of
innerHTML being exactly the same from browser to browser.
When used in write mode, innerHTML parses the given string into a DOM subtree and replaces all of the
existing child nodes with it. Because the string is considered to be HTML, all tags are converted into
elements in the standard way that the browser handles HTML (again, this differs from browser to
browser). Setting simple text without any HTML tags, as shown here, acts the same as innerText :
div.innerHTML = “Hello world!”;
Setting innerHTML to a string containing HTML behaves quite differently. Where innerText escaped
HTML syntax characters, innerHTML parses them. Consider the following example:
div.innerHTML = “Hello & welcome, < b > \”reader\”! < /b > ”;
The result of this operation is as follows:
< div id=”content” > Hello & amp; welcome, < b > & quot;reader & quot;! < /b > < /div >
After setting innerHTML , you can access the newly created nodes as you would any other nodes in the
document.
Setting innerHTML causes the HTML string to be parsed by the browser into an appropriate DOM
tree. This means that setting innerHTML and then reading it back typically results in a different string
being returned. This is because the returned string is the result of serializing the DOM subtree that was
created for the original HTML string.
There are some limitations to innerHTML . For one, < script > elements cannot be executed when
inserted via innerHTML in most browsers. IE is the only browser that allows this, but only as long as the
defer attribute is specified and the < script > element is preceded by what Microsoft calls a scoped
element . The < script > element is considered a NoScope element , which more or less means that it has no
visual representation on the page, like a < style > element or a comment. IE strips out all NoScope
elements from the beginning of strings inserted via innerHTML , which means the following won ’ t work:
div.innerHTML = “ < script defer > alert(‘hi’); < /scr” + “ipt > ”; //won’t work
In this case, the innerHTML string begins with a NoScope element, so the entire string becomes empty.
To allow this script to work appropriately, it must be preceded by a scoped element, such as a text node
or an element without a closing tag such as < input > . The following lines will all work:
div.innerHTML = “_ < script defer > alert(‘hi’); < /scr” + “ipt > ”;
div.innerHTML = “ < div > & nbsp; < /div > < script defer > alert(‘hi’); < /scr” + “ipt > ”;
div.innerHTML = “ < input type=\”hidden\” > < script defer > alert(‘hi’); < /scr” + “ipt > ”;
The first line results in a text node being inserted immediately before the < script > element. You may
need to remove this after the fact so as not to disrupt the flow of the page. The second line is a similar
approach, using a < div > element with a nonbreaking space. An empty < div > alone won ’ t do the trick; it
must contain some content that will force a text node to be created. Once again, the first node may need
303