jQuery的.append（）函数

问题描述：

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

产生

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

，而不是

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

？

谢谢！

你应该在这里添加代码。这样即使外部资源消失，其他人也可以有机会看到整个问题。 – Juriy 2010-05-12 15:51:29

答

因为浏览器需要在每个追加之后（重新）建立自己的DOM。它不能知道结束标签会晚些时候出现，并且开始标签本身是无效的，因此在这种情况下纠错将会关闭未关闭的元素。

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

为了清楚起见，如果你传递HTML字符串片段，append只依赖于innerHtml。追加本身附加一个DOM节点;如果你传入一个HTML字符串，它使用innerHTML创建一个DOM节点，然后像这样附加。 – 2010-05-12 17:40:33

答

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

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

更好地说* HTML标记*而不是* HTML元素*。 – Gumbo 2010-05-12 15:45:10

谢谢，纠正。 – richardtallent 2010-05-12 15:48:06

严格来说，并不是每个HTML元素都是一个标签。你可以附加一个TextNode，它不是:-) – Juriy 2010-05-12 15:50:36

答

因为你不能附加未完成的HTML片段，所以你总是追加元素。对于你的情况，你有做任何

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

或

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