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() #div1时，您正在清除#div2，因为它是#div1的孩子。

如果you use native JavaScript：

，此行为是相同的

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

Answer 4

解析HTML不是jQuery。这是浏览器。浏览器，除非提供XHTML mime类型，否则无法识别自闭标记（理所当然）。它将HTML解释为

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

脚本的第一行（正确）用

替换它

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

脚本的第二行无法找到任何#div2，因此它不会执行任何操作。