javascript - 使用 jQuery 进行 XHTML DOM 操作

Question

我使用的是 Firefox 3.5。我的文档类型是 XHTML 1.0 Strict。假设我想将一个图像插入到一个 id 为“foo”的 div 中；那么我可能会尝试:

var foo = $('#foo');
foo.html('<img src="bar.gif" />');

这确实添加了图像。但我注意到这会导致文档后面出现一些奇怪的行为，我怀疑这可能是由于 XHTML 中断造成的。果然，使用 Firefox 的 Web Developer 工具，我检查了生成的源代码，并惊恐地发现在脚本运行后，我有:

<div id="foo"><img src="bar.gif"></div>

img 标签上的尾部斜杠去哪儿了!？四处搜索，我发现这不是一个特定于 jQuery 的问题:The pure JavaScript code

document.getElementById('foo').innerHTML = '<img src="bar.gif" />';

产生相同的结果。所以我该怎么做？我应该注意，使用扩展形式

<img src="bar.gif"></img>

不影响结果。如何使用 JavaScript 将严格有效的 XHTML 插入到我的文档中？

Answer 1

这有点瞎猜，我不确定这是否是原因，但您确定您提供的是 XHTML 而不仅仅是带有 XHTML 语法的标准 HTML。即:文档的MIME类型是默认的text/html还是application/xhtml+xml？

我最近阅读了以下文章，如果浏览器实际上没有将文档视为 XML(因此它删除了错误的 XHTML 样式斜线，因为不符合到 MIME 类型)...

http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

只是一个想法。