jQuery附加html与追加现有元素

我有一个字符串big_html,我想将它添加到一些div.我观察到以下性能差异：

$('#some-div').append( big_html );
// takes about 100 ms

//create it first
var append_objs = $(big_html);
$('#some-div').append( append_objs );
//takes about 150 ms

有谁知道为什么会这样？感谢您的时间.

编辑：
我正在尝试获取我正在添加到页面的内容.我也试过了

var added = $(big_html).appendTo( '#some-div' );
//150 ms

有没有一种有效的方法来做到这一点？

解决方法

在第二种情况下,jQuery让浏览器构建一个文档片段然后将HTML填入其中以供浏览器解析.然后,当您将其附加到页面时,您可以再次操作DOM.

因此,第二个版本只是做比第一个更多的工作.

我鼓励你(和所有感兴趣的人)保持jQuery的非缩小版本以供阅读.阅读代码是很有启发性的.

在将内容添加到DOM排序后“获取”内容取决于它的内容.由于内容被追加,你必须首先记住目标的最后一个元素：

var last = $('#some_div > *:last');
$('#some_div').append(big_html_string);
var newStuff = last.nextAll();

如果目标div可能开始为空,您还需要检查它：

var newStuff = last.length ? last.nextAll() : $('#some_div > *');

原文地址：https://www.jb51.cc/jquery/178386.html