Question

为什么this

$("#mydiv").append("<ul>");
$("#mydiv").append("<li>Hello</li>");
$("#mydiv").append("</ul>");
alert($("#mydiv").html());

产生

<ul></ul><li>Hello</li>

而不是

<ul><li>Hello</li></ul>

谢谢！

Answer 1

Append（）追加DOM节点，而不是HTML标签（即，它是一个附加对象，而不是附加的字符串）。

当您追加<ul>时，您正在创建一个包含开始和结束标记的整个UL节点。 </ul>调用将被忽略。

Answer 2

因为您无法附加未完成的HTML片段，所以您总是附加元素。对于你的情况，你做了

$("#mydiv").append("<ul></ul>");
$("#mydiv ul").append("<li>Hello</li>");

或

$("#mydiv").append("<ul><li>Hello</li></ul>");

Answer 3

因为浏览器需要在每次追加后（重新）构建其DOM。它无法知道结束标记将在稍后出现，并且开始标记本身无效，因此纠错会在此情况下启动，在此情况下会关闭未关闭的元素。

这是innerHtml和依赖它的东西（例如jQuery的追加方法）不可靠的原因之一，应该尽可能避免。