jQuery html() 和自闭合标签答案

【问题标题】：jQuery html() and self-closing tagsjQuery html() 和自闭合标签
【发布时间】：2011-02-03 04:16:52
【问题描述】：

使用 jQuery html() 创建自闭合元素时，会发生以下问题：

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

将创造

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

它正确关闭了<li>标签，但不是<input>

这似乎是 html() 函数中使用的 innerHTML 的问题。

我到处寻找并找到了解决方案，但该页面不再可用，如您在以下位置看到的：http://dev.jquery.it/ticket/3378

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

【问题讨论】：

你不能把它改成$('#someId').html('

【解决方案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?，尤其是第一个答案。

【讨论】：

但 XHTML 不正确 - “在 XHTML 中，标签必须正确关闭，例如。”
@Pedro 我的建议是“不要使用 XHTML”。这有点像跨浏览器的噩梦。见stackoverflow.com/questions/348736/…
不错的链接...我正要发布它！
感谢 cletus 我以前读过它，我想我迟早要进行过渡，但由于它似乎存在一个解决方案，我想知道它。

【解决方案2】：

在 HTML5 时代，有人可能会争辩说 <input type="checkbox"> 和 <input type="checkbox" /> 是相同 void 元素的同等有效表示。

虽然这是真的，但 innerHTML 仍然在没有 /> 的情况下序列化 void 元素的原因有两个：

一个 void 元素是一个 void 元素，无论您如何向浏览器表示它。当浏览器构建元素时，它的标记已经无关紧要了，就 DOM 而言，它是一个复选框类型的 input 元素。元素的“标签”唯一相关的地方是它的tagName 属性和even that has its own quirk。
浏览器没有任何理由开始使用 /> 语法序列化 void 元素，而 HTML5 本身基于 HTML 而不是 XML不需要它。这样做只是因为使用/> 语法同样有效，不必要地破坏了与旧站点的兼容性，绝对为零增益（因为/> 的存在不会以任何方式改变输出的含义）。这让我们回到了 cletus 区分 HTML 标记和 XHTML 标记的答案。

innerHTML，以及扩展名jQuery.html()，旨在为您提供来自 DOM 的元素内容的 HTML 表示。它不是旨在为您提供浏览器用来在 DOM 中构造元素的 HTML 标记。你不能“修复”这个问题，因为一开始就没有什么可以修复的。您需要做的是避免依赖元素的 innerHTML 来处理除了偶尔的调试会话之外的任何事情。

另见：Nested <p> tag auto-closing/opening

【讨论】：