Jquery – 追加vs AppendTo

有人可以解释一下为什么常规追加循环比AppendTo更好吗？

//Using Regular Append var ul = $("
"); $("#myDiv").empty().append(ul) $.each(movies, function (count, item) { var id = 'li_' + count; ul.append('
' + item + '
'); $('#' + id).click(function () { }); }); //Using AppendTo var div = $("#myDiv").empty(), ul = $("
").appendTo(div); $.each(movies, function (count, item) { $('
' + item + '
').click(function () { }).appendTo(ul); }); 

结果http://jsperf.com/sdp-jquery-append/3

Answer 1

append vs appendTo performance（jQuery 1.9.1）

从jQuery代码中可以看出，appendTo具有更好性能的原因之一是因为appendTo实现比常规追加稍微复杂一些。

虽然append大致取决于native appendChild函数，但appendTo是一个需要由代码处理的jQuery补充（appendTo中有额外的循环，它对元素进行操作并实际调用.append）。 虽然性能影响不大（如果你只是比较最简单的用法，比如在这个例子中： http ： //jsperf.com/sdp-jquery-append/5 ），那肯定是要记住的。

至于链接的jsperf中标记为“Better”的示例：

它表现得更好，因为在最快的版本中（在你链接到的jsperf中）你只需要收集要附加的html，而不是在每次迭代时实际附加它。

它节省了浏览器资源，因为它不必在每次迭代时重排和重新绘制内容。

Answer 2

append(content)将内容追加到每个匹配元素的内部。

appendTo(selector)将所有匹配的元素追加到另一个指定的元素集。