jquery - JQuery 是否支持自关闭 div 标签

Question

我惊讶地发现 jQuery 似乎不支持自关闭 div 标签。这是一个简单的例子：

    <div id="div1" />
    <div id="div2" />

<script>
$("#div1").html("hello");
$("#div2").html("world");
</script>

http://jsfiddle.net/UTq4c/1/

当它运行时， div2 将从 DOM 中删除。

我读过 HTML 5 不支持自动关闭 div，但我仍然对这种行为感到惊讶。

jquery有这种行为的原因吗？

Answer 1

HTML 5 不支持自动关闭的 div，因此您的 HTML 代码解释如下：

<div id="div1">
    <div id="div2">
    </div>
</div>

然后，

$("#div1").html("hello");

替换div id="div2"为“你好”，你会看到你所看到的。

Answer 2

这与 jQuery 无关。

如果文档类型是 HTML5，浏览器会在呈现之前去除自闭合 div 标签。jQuery 只能看到浏览器去除了这些元素的 DOM 版本。

Answer 3

这与 jQuery 无关。如果您查看浏览器如何解释您提供的无效 HTML（至少在 Chrome 中）：

<div id="div1">
  <div id="div2">
  </div>
</div>

因此，当您设置html()of 时#div1，您正在清除它，#div2因为它呈现为#div1.

如果您使用本机 JavaScript，此行为是相同的：

document.getElementById("div1").innerHTML = "hello";
document.getElementById("div2").innerHTML = "world";

Answer 4

解析 HTML 的不是 jQuery。是浏览器。浏览器，除非使用XHTMLmime-type 服务，否则无法识别自闭合标记（理所当然）。它将 HTML 解释为

<div id="div1">
  <div id="div2">
    <script>
      ...
    </script>
...

脚本的第一行（正确）将其替换为

<div id="div1">
  hello
</div>

脚本的第二行找不到 any #div2，所以它什么也不做。