DOM Exception when assigning HTML entities to innerHTML

Question

On this page http://blog.zacharyvoase.com/2010/11/11/sockets-and-nodes-i/, running the following code in javascript console will throw an Exception.

var div = document.createElement('div'); div.innerHTML = "»";

• Chrome 8.0.552.28 Mac: Error: INVALID_STATE_ERR: DOM Exception 11
• Firebug in Firefox 3.6.12 Mac: NS_ERROR_DOM_SYNTAX_ERR An invalid or illegal string was specified
• Safari 5.0.2 Mac: Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7
  Opera: works fine

But it works fine in all other pages I tried. My questions are what's special about the page and why does chrome and firefox throw an exception?

Writing the character directly without using entity works fine.

var div = document.createElement('div'); div.innerHTML = "»";

Using other entities also works, e.g.

var div = document.createElement('div'); div.innerHTML = "<";

Answer 1

I'm answering my own question.

The short answer: it's because of browser limitation.

If a page is recognized as XHTML by certain browsers, only a subset of named character entities allowed by the standard are supported for innerHTML assignment.

Specifically in my testing, it seems that in Mozilla and Webkit, only ", &, < and > are allowed in innerHTML assignment.

My testing code is available here: https://gist.github.com/673901

XHTML is a "better" and cleaner version of HTML reformulated in XML. XHTML 1.1 was supposed to be the successor and future of HTML. However, this is unlikely to happen with the adoption of HTML5.

Unlike HTML, which requires a dedicated HTML parser, an XHTML document can be parsed by a general XML parser. At least in mozilla and webkit, XHTML and HTML go through different code paths. It's understandable that the HTML code path is where most effort goes to and also better tested because there are far more HTML documents out there than XHTML.

It is worth noting that whether a document is recognized as XHTML is determined by the effective MIME type rather than the document content.

The conclusion is that if you are working with XHTML, make sure you convert named entities to numeric entities (e.g.   ->  ) before assigning to .innerHTML.

Answer 2

It appears as though it is expecting that you are trying to add encoded HTML but it's detecting it as malformed.
Does var div = document.createElement('div'); div.innerHTML = "»"; do what you need?

Per Comment: var dv = document.createElement('div'); dv.innerHTML = "»"; document.getElementById('test').appendChild(dv);

I got the encoded character here.

You're right about » being valid encoded HTML. I can only guess it's a limitation of the browser.