The Internet Explorer innerHTML Quirk

The innerHTML property of HTML elements is well-known and widely used. It is capable of setting the complete content of an element in one go, including elements and the like. As the QuirksMode tests have shown, innerHTML is the fastest way to dynamically change the page content.

However, innerHTML has a problem in Internet Explorer.

The HTML standard requires a transformation on display of content. All kinds and amounts of adjacent whitespace are collapsed into a single space. This is a good thing - just as an example, it allows me to add a lot of line breaks into this source file without having to worry about weird line breaks in the displayed text.

Internet Explorer applies these transformations on assignment to the innerHTML property. This seems like a good idea: it saves a little time during display, because if the in-memory representation is already normalized, then the browser doesn't have to normalize whenever it needs to display the text.

There are exceptions to the normalization rule, though. Notably, these are the <textarea> element, the <pre> element and, in CSS-aware browsers, elements with any value but normal for the white-space property.

Internet Explorer does not respect these special cases. The third makes their optimization a bad idea, because white-space might change at runtime, for example through the DOM. In any case, Internet Explorer will normalize all assignments to the innerHTML property, thus causing the effect demonstrated below.

This text fills the pre at page load.
It contains line breaks    and    multiple   spaces.
As you can see, formatting is preserved.

This text fills the textarea at page load. This, too, contains line breaks and multiple spaces. Formatting is preserved here as well, except that the UA may break lines.

You can now try some JavaScript buttons and compare their effects in Mozilla and Internet Explorer. Mozilla does not support insertAdjacentHTML or innerText, though.

Here is the script used. The functions are in the same order as the buttons.

function t2pih() {
	var content = document.getElementById("theTextarea").value;
	document.getElementById("thePre").innerHTML = content;
}
function t2pit() {
	var content = document.getElementById("theTextarea").value;
	document.getElementById("thePre").innerText = content;
}
function t2piah() {
	var content = document.getElementById("theTextarea").value;
	document.getElementById("thePre").innerHTML = "";
	document.getElementById("thePre").insertAdjacentHTML(
		"afterBegin", content);
}

var initial = "This text fills the textarea at page load.\n"+
"This, too, contains line breaks    and    multiple    spaces.\n"+
"Formatting is preserved here as well, except that the UA may break lines.";

function rtv() {
	document.getElementById("theTextarea").value = initial;
}

function rti() {
	document.getElementById("theTextarea").innerHTML = initial;
}

Internet Explorer will correctly reset the content of the textarea if the value property is used, as there is no transformation done on assignment to that. You can use innerText for a pre. However, this does not allow the assigned text to contain elements, such as a span for colouring. Also, the innerText property is, unlike the innerHTML property, not widely implemented.

In conclusion, while Internet Explorer was the first browser to have innerHTML (as Microsoft invented this property), it is also the browser which doesn't implement it properly. While the behaviour that setting innerHTML on a textarea to a value that contains a tag creates an error (informatively called an 'unknown error' in the browser) is documented, the transformation that is applied to the new value is not. There is, in fact, no mention of HTML normalization anywhere.

Sebastian Redl

Send comments to wasti DOT redl AT gmx DOT net.

References:

The textarea element.

The white-space CSS property.

the innerHTML JavaScript property.