innerHTML

  • Supported in Firefox
  • Supported in Chrome
  • Supported in Safari
  • Supported in IE
  • Supported in Opera

The property innerHTML was introduced by Internet Explorer and has since been standardised by the W3C and WHATWG. Its aim is to provide a HTML string representing the structure of the DOM node or when given a HTML string create/update a DOM node.

Browsers implement the extraction of the HTML string using the W3C fragment serialization algorithm, but there are a number of differences in output.

IE body.innerHTML ouput vs original HTML

  • Removes unneeded space from the end of an attribute set in a tag
  • Adds missing table tr elements
  • Removes the first line return at the beginning of a pre tags content
  • In some cases, reorders the attributes of a tag
  • Injects attributes where missing, such as value="Reset" on an input reset tag
  • Removes namespace attributes such as “xmlns”
  • Lowercases the value of the color property of the font tag
  • Incorrectly adds missing closing tags to the bottom of its output
  • Escapes tags with inside a noscript tag
  • Escapes tags with inside an iframe tag
  • Adds additional pram elements to an applet tag

Firefox body.innerHTML ouput vs original HTML

  • Removes unneeded space from the end of an attribute set in a tag
  • Adds missing table tr elements
  • Removes the first line return at the beginning of a pre tags content
  • Adds =”” to attributes which do not have them
  • Injects closing tag elements where they are missing
  • In some cases, reorders the attributes of a tag
  • Injects a tabindex property into the video and audio tags
  • Injects shadow dom elements for the keygen tag

Chrome/Safari body.innerHTML ouput vs original HTML

  • Removes unneeded space from the end of an attribute set in a tag
  • Adds missing table tr elements
  • Removes the first line return at the beginning of a pre tags content
  • Adds =”” to attributes which do not have them
  • Injects closing tag elements where they are missing
  • Escapes tags with inside a noscript tag
  • Escapes tags with inside an iframe tag

Opera body.innerHTML ouput vs original HTML

  • Removes unneeded space from the end of an attribute set in a tag
  • Adds missing table tr elements
  • Removes the first line return at the beginning of a pre tags content
  • Adds =”” to attributes which do not have them
  • Injects closing tag elements where they are missing

Note: Some modifications to the output are common across all the major browsers implementations of innerHTML. Those items which are uncommon are marked in red.

Exported text from body.innerHTML

Source/Browser File link
The original HTML html5elements.html
Firefox 17.0.1 firefox-innerhtml.txt
Chrome 23.0 chrome-innerhtml.txt
Safari 6.0.2 safari-innerhtml.txt
IE 9.0 ie-innerhtml.txt
Opera 12.11 opera-innerhtml.txt

You can use a tool such as quickdiff to compare the text files and find differences in the properties output across browsers

Note: You should exclude text encoding issues and also allow for the fact that text block’s may have been trimmed when the text was copied out of the browsers into these files

Object, method, and property compatibility

  Firefox 17.0.1 Chrome 23.0 Safari 6.0.2 IE 9.0 Opera 12.11
innerText Yes Yes Yes Yes Yes

Notes

I found claims on the web for support for the innerText property in IE 5.5, Opera 8, Chrome 4, Safari 4 and Firefox 3 onwards. Support may well be found in earlier versons of these browsers. Firefox has never supported this property.

Useful Links