javascript

Chapter 10: The Document Object Model
to be removed to avoid layout issues. The third line uses a hidden < input > field to accomplish the same
thing. Since it doesn ’ t affect the layout of the page, this may be the optimal case for most situations.
In most browsers, the < style > element causes similar problems with innerHTML . Opera 9 and later as
well as Firefox 2 and later support the insertion of < style > elements using innerHTML in the exact way
you ’ d expect, as shown here:
div.innerHTML = “ < style type=\”text/css\” > body {background-color: red; } < /style > ”;
IE and Safari ignore the < style > element. In IE, < style > is yet another No Scope element, so it must be
preceded by a scoped element such as this:
div.innerHTML = “_ < style type=\”text/css\” > body {background-color: red; } < /style > ”;
div.removeChild(div.firstChild);
Safari and Chrome continue to ignore the < style > element because it ’ s not attached to the < head >
element. So, to make this work in all four browsers, the following code must be used:
//Opera, Firefox, and IE
div.innerHTML = “_ < style type=\”text/css\” > body {background-color: red; } < /style > ”;
div.removeChild(div.firstChild);
//Safari and Chrome
document.getElementsByTagName(“head”)[0].appendChild(div.firstChild);
When you add the newly created < style > element to the < head > , Safari and Chrome honor the new
style information.
The innerHTML property is not available on all elements. The following elements do not support
innerHTML : < col > , < colgroup > , < frameset > , < head > , < html > , < style > , < table > , < tbody > ,
< thead > , < tfoot > , < title > , and < tr > .
Firefox ’s support of innerHTML is stricter in XHTML documents served
with the application/xhtml+xml content type. When using innerHTML
in XHTML documents, you must specify well - formed XHTML code. If the
code is not well -formed, setting innerHTML fails silently.
Whenever you ’ re using innerHTML to insert HTML from a source external to your code, it ’ s important to
sanitize the HTML before passing it through to innerHTML . IE 8 added the window.toStaticHTML() method
for this purpose. This method takes a single argument, an HTML string, and returns a sanitized version
that has all script nodes and script event - handler attributes removed from the source. Following is an example:
var text = “ < a href=\”#\” onclick=\”alert(‘hi’\” > Click Me < /a > ”;
var sanitized = window.toStaticHTML(text); //IE 8 only
alert(sanitized); //” < a href=\”#\” > Click Me < /a > ”
This example runs an HTML link string through toStaticHTML() . The sanitized text no longer has the
onclick attribute present. Though IE 8 is the only browser with this native functionality, it is still
advisable to be careful when using innerHTML and inspect the text manually before inserting it, if possible.
304