使用jQuery html()创建自闭元素时会出现以下问题:
$('#someId').html('<li><input type="checkbox" /></li>')
将创建
<li><input type="checkbox"></li>
它正确关闭了<li>
代码,但未正确关闭<input>
似乎是来自innerHTML的问题,它在html()函数中使用。
我已经到处查找并找到了解决方案,但您看到的页面不再可用:http://dev.jquery.it/ticket/3378
有人知道如何解决这个问题吗?
答案 0 :(得分:7)
澄清一下,这是有效的HTML:
<input type="checkbox">
这是有效的XML(包括XHTML):
<input type="checkbox"/>
但是不是有效的HTML。话虽如此,大多数浏览器可能会接受它(但如果这对您来说意味着什么,那么文档将无法通过验证)。
html()
使用innerHTML
。在IE和可能的其他浏览器中,这有问题,因为XHTML仍然被建模为HTML DOM。请参阅Internal IE-HTML DOM still isn’t XHTML compliant。
基本上,使用XHTML的理由很少。这是一个跨浏览器的噩梦。有关为何查看XHTML - Is writing self closing tags for elements not traditionally empty bad practise?的详细摘要,尤其是第一个答案。
答案 1 :(得分:1)
在HTML5时代,人们可能会争辩说<input type="checkbox">
和<input type="checkbox" />
是同一个空元素的同等有效表示。
虽然这是真的,innerHTML
仍然在没有/>
的情况下序列化void元素的原因有两个:
无论 如何向浏览器表示,void元素都是一个void元素。当浏览器构造元素时,它的标记是无关紧要的,就DOM而言,它是类型为input
元素的复选框。元素的“标记”唯一相关的位置是tagName
属性和even that has its own quirk。
当HTML5本身由于基于HTML而非XML时,浏览器开始使用/>
语法序列化void元素没有任何理由不需要它。这样做只是因为使用/>
语法同样有效,不必要地破坏与遗留站点的兼容性以获得绝对零增益(因为/>
的存在不会以任何方式改变输出的含义) 。这让我们回到了cletus的答案,区分了HTML标记和XHTML标记。
innerHTML
,以及jQuery.html()
扩展,旨在为您提供来自DOM 的元素内容的HTML表示。 not 旨在为您提供浏览器用于在DOM中构造元素的HTML标记。你不能“修复”这个,因为没有什么可以解决的。你需要做的是避免依赖元素的innerHTML
来做除偶尔调试会话以外的任何事情。