jQuery html() 和自闭合标签

Question

使用jQuery的html()方法创建自闭合元素时，会出现以下问题：

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

将创建

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

它可以正确关闭<li>标签，但是不能关闭<input>标签。

看起来这是innerHTML在html()函数中使用时出现的问题。

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

有人知道如何修复吗？

- UXTE

---

你能不能把它改成 $('#someId').html('<li><input type="checkbox"></input></li>')？ - Avitus

你正在使用XHTML的闭合方法，这是你想要的还是只是HTML？ - dscher

你不应该自闭HTML。 - theonlygusti

Answer 1

为了澄清，以下是有效的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?，特别是第一个答案。

- cletus

---

但这不是正确的XHTML - “在XHTML中，<input>标签必须被正确地关闭，像这样<input />。” - dscher

@Pedro 我的建议是“不要使用XHTML”。它在跨浏览器方面有点困难。请参见https://dev59.com/YnRC5IYBdhLWcg3wSu97 - cletus

不错的链接...我正要发布它！ - alex

谢谢你，Cletus。我之前读过这个，我想我迟早得做出转换，但由于似乎存在解决方案，我想知道它是什么。 - UXTE

Answer 2

在HTML5时代，有人可能会认为<input type="checkbox">和<input type="checkbox" />都是相同的空元素的有效表示方式。

虽然这是正确的，但innerHTML仍然将空元素序列化为没有/>的形式，原因有两个：

• 无论你如何向浏览器展示，空元素始终是空元素。当浏览器构建元素时，它的标记是无关紧要的，就DOM而言，它只是一个类型为复选框的输入元素。元素"标签"仅在其tagName属性中相关，并且即使是这个也有自己的怪癖。

• 没有任何理由让浏览器使用/>语法开始序列化空元素，因为HTML5本身基于HTML而不是XML，所以并不需要这样做。之所以这么做只是因为使用/>语法同样有效，这样做毫无意义地破坏了与旧网站的兼容性，并且没有任何收益（因为/>的存在不会以任何方式改变输出的含义）。这就带我们回到了cletus的答案，区分HTML标记和XHTML标记。

innerHTML，以及扩展的jQuery.html()，旨在从DOM中提供元素内容的HTML表示。它不是为了提供浏览器用于构造DOM中元素的HTML标记。你不能“修复”这个问题，因为一开始就没有什么需要修复的。你需要做的是避免仅依赖于元素的innerHTML，除了偶尔进行调试。

另请参阅：嵌套的<p>标签自动关闭/打开

- BoltClock