将 HTML 实体分配给 innerHTML 时出现 DOM 异常
在此页面上 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 = "<";
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 = "<";
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我正在回答我自己的问题。
简短的回答：这是因为浏览器限制。
如果某个页面被某些浏览器识别为 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，请确保在之前将命名实体转换为数字实体（例如
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.
它似乎期望您尝试添加编码的 HTML，但它检测到它格式错误。
做
var div = document.createElement('div'); div.innerHTML = "»"; 做你需要的吗？
每条评论： var dv = document.createElement('div'); dv.innerHTML = "»"; document.getElementById('test').appendChild(dv);
我得到了编码字符 此处。
您对
»是有效编码 HTML 的看法是正确的。我只能猜测这是浏览器的限制。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.