jQuery .append()函数

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

因为浏览器需要在每次追加后(重新)构建它的DOM。它不能知道后面会出现结束标记，并且开始标记本身是无效的，所以错误纠正就开始了，在这种情况下，它会关闭未关闭的元素。

这就是为什么innerHtml和依赖它的东西(比如jQuery的append方法)不可靠的原因之一，应该尽可能避免。

Answer 2

Append()附加DOM节点，而不是HTML标记(即它是对象附加，而不是字符串附加)。

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

Answer 3

因为不能附加未完成的HTML片段，所以总是附加元素。对于您的情况，您必须执行以下任一操作

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

或

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