使用jQuery进行XHTML DOM操作

Question

我正在使用Firefox 3.5.我的doctype是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的问题:纯JavaScript代码

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

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

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

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

Answer 1

这是一个在黑暗中的一点点,我不确定这是否是原因,但你确定你正在提供XHTML而不仅仅是标准HTML与XHTMLs语法.那就是:文档的MIME类型是默认的text/html还是application/xhtml + xml？

我最近阅读了下面的文章,如果浏览器实际上没有将文档视为XML,那么你所遇到的问题对我来说是完全合理的(因此它删除了错误的XHTML样式斜杠,因为它不符合MIME类型)...

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

只是一个想法.