Javascript 使用jQuery进行XHTML DOM操作

我正在使用Firefox3.5。我的doctype是XHTML1.0严格的。假设我想在一个div中插入一个id为“foo”的图像；那么我可以试试：

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

var foo=$（'#foo'）；
html（“”）；

这确实增加了形象。但我注意到，这在文档后面导致了一些奇怪的行为，我怀疑这可能是由于XHTML被破坏造成的。果然，使用Firefox的Web Developer工具，我检查了生成的源代码，发现在脚本运行后，我：

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

img标签上的尾随斜杠到哪里去了！？四处搜索，我发现这不是jQuery特有的问题：纯JavaScript代码

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

document.getElementById（'foo'）.innerHTML=''；

产生相同的结果。那么，我该怎么办？我应该注意到，使用扩展表单

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

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

试试以下方法：

var image = document.createElement('img');
image.setAttribute('src', 'bar.gif');
foo.appendChild(image);

---

我做了一个小测试

代码：

$（'input.clone'）.live（'click'，function（））{
变量img=$（'
html:

测试


这有点像是瞎猜，我不确定这是否是原因，但您确定您提供的是XHTML，而不仅仅是带有XHTML语法的标准HTML。也就是说：文档的MIME类型是默认文本/HTML还是应用程序/XHTML+xml

我最近读了下面的文章，如果浏览器没有将文档实际视为XML（因此它删除了不符合MIME类型的错误XHTML样式斜杠），那么您遇到的问题对我来说是非常有意义的


只是想一想。
尝试转义你的斜杠…它可能没有放置它，因为它没有转义：

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

$（'#foo'）.html（''）；

另外，如果您正在编写XHTML，请不要忘记需要包含
alt
text:）
这种技术不会影响结果。根据Web Developer扩展，img标记在生成的源代码中仍然没有关闭。完全正确！我以为我的页面是作为应用程序/xhtml+xml提供的，但实际上它只是文本/html。切换导致生成的代码包含尾部斜杠。谢谢！你说得对不是alt属性，但我认为在这种情况下不需要转义前斜杠。我相信这只是做同样事情的一种更详细的方式。结果证明，我观察到的奇怪行为是不相关的。但是lhnz在MIME类型上是绝对正确的。事实证明，当使用text/html时，Firefox会去除不必要的closing在内部使用斜杠，因此Web Developer显示的生成源代码反映了这一点。故事的寓意是：向支持它的浏览器提供application/xhtml+xml，其余浏览器提供text/xhtml。
<div id="target"> test </div>
<input type="button" class="clone" id="btnClone" value="clone"/>

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