将 HTML 实体分配给 innerHTML 时出现 DOM 异常

Question

在此页面http://blog.zacharyvoase.com/2010/11/11/sockets-and-nodes-i/，在javascript控制台中运行以下代码将引发异常。

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

• Chrome 8.0.552.28 Mac：错误：INVALID_STATE_ERR：DOM 异常 11
• Firefox 3.6.12 Mac 中的 Firebug：NS_ERROR_DOM_SYNTAX_ERR 指定了无效或非法的字符串
• Safari 5.0.2 Mac：错误：NO_MODIFICATION_ALLOWED_ERR：DOM 异常 7
  Opera：工作正常

但它在我尝试过的所有其他页面中都可以正常工作。我的问题是页面有什么特别之处和为什么 chrome 和 firefox 会抛出异常？

不使用实体直接写字符可以正常工作。

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

使用其他实体也可以，例如

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

Answer 1

我正在回答我自己的问题。

简短的回答：这是因为浏览器的限制。

如果页面被某些浏览器识别为 XHTML，则仅支持标准允许的命名字符实体的子集进行 innerHTML 分配。

具体在我的测试中，似乎在 Mozilla 和 Webkit 中，innerHTML 赋值中只允许使用"、&、< 和>。

我的测试代码在这里：https://gist.github.com/673901

XHTML 是用 XML 重新编写的 HTML 的“更好”和更简洁的版本。 XHTML 1.1 应该是 HTML 的继承者和未来。但是，采用 HTML5 后不太可能发生这种情况。

与需要专用 HTML 解析器的 HTML 不同，XHTML 文档可以由通用 XML 解析器解析。至少在 mozilla 和 webkit 中，XHTML 和 HTML 经历了不同的代码路径。可以理解的是，HTML 代码路径是最努力的地方，并且经过更好的测试，因为那里的 HTML 文档比 XHTML 多得多。

值得注意的是，文档是否被识别为 XHTML 取决于有效的 MIME 类型，而不是文档内容。

结论是，如果您使用 XHTML，请确保在分配给 .innerHTML 之前将命名实体转换为数字实体（例如   ->  ）。

Answer 2

它似乎期望您尝试添加编码的 HTML，但它检测到它是格式错误的。
做 var div = document.createElement('div'); div.innerHTML = "»"; 做你需要的？

每条评论：var dv = document.createElement('div'); dv.innerHTML = "»"; document.getElementById('test').appendChild(dv);

我得到了编码字符here。

» 是有效的编码 HTML，您说得对。我只能猜测这是浏览器的限制。