jQuery html()和自闭标签

时间:2010-03-31 23:55:58

标签: javascript jquery html dom

使用jQuery html()创建自闭元素时会出现以下问题:

$('#someId').html('<li><input type="checkbox" /></li>')

将创建

<li><input type="checkbox"></li>

它正确关闭了<li>代码,但未正确关闭<input>

似乎是来自innerHTML的问题,它在html()函数中使用。

我已经到处查找并找到了解决方案,但您看到的页面不再可用:http://dev.jquery.it/ticket/3378

有人知道如何解决这个问题吗?

2 个答案:

答案 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来做除偶尔调试会话以外的任何事情。

另请参阅:Nested <p> tag auto-closing/opening