Question

出于这个问题的目的，我们需要append() 1000个body元素的对象。

你可以这样做：

for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    $('body').append(element);
}

这样可行，但对我来说效率似乎不高，因为AFAIK会导致1000次文件重排。更好的解决方案是：

var elements = [];
for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    elements.push(element);
}
$('body').append(elements);

然而，这不是一个理想的世界，这会引发错误Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]。我知道append()无法处理数组。

我如何使用jQuery（我知道DocumentFragment节点，但假设我需要在元素上使用其他jQuery函数，例如.css()）添加一堆对象到DOM可以立刻提高性能吗？

Answer 1

您可以使用空的jQuery对象而不是数组：

var elements = $();
for(x = 0; x < 1000; x++) {
    elements = elements.add('<div>'+x+'</div>');
    // or 
    // var element = $('<div>'+x+'</div>');
    // elements = elements.add(element);
}
$('body').append(elements);

如果你想在循环中用新生成的元素做一些事情，这可能很有用。但请注意，这将创建一个巨大的内部元素堆栈（在jQuery对象内）。

看来your code works perfectly fine with jQuery 1.8 。

Answer 2

你可以打电话

$('body').append(elements.join(''));

或者你可以在第一时间创建一个大字符串。

var elements = '';
for(x = 0; x < 1000; x++) {
    elements = elements + '<div>'+x+'</div>';
}
$(document.body).append(elements);

正如您所提到的，可能最“正确”的方式是使用DocFrag。这可能看起来像

var elements = document.createDocumentFragment(),
    newDiv;
for(x = 0; x < 1000; x++) {
    newDiv = document.createElement('div');
    newDiv.textContent = x;
    elements.append( newDiv );
}
$(document.body).append(elements);

IE＆lt; 9不支持

^{.textContent，需要进行条件检查才能使用.innerText或.text。}

Answer 3

升级到jQuery 1.8，这可以按预期工作：

$('body').append([
    '<b>1</b>',
    '<i>2</i>'   
]);

Answer 4

由于$ .fn.append采用可变数量的元素，我们可以使用apply将数组作为参数传递给它：

el.append.apply(el, myArray);

如果你有一个jQuery对象数组，这是有效的。根据规范，如果你有DOM元素，你可以附加一个元素数组。如果你有一系列html字符串，你可以只加上。（＃39;＆＃39;）然后将它们全部追加。

Answer 5

第二种方法略有改变：

var elements = [],
newDiv;
for (x = 0; x < 1000; x++) {
    newDiv = $('<div/>').text(x);
    elements.push(newDiv);
}
$('body').append(elements);

$。append（）当然可以追加一个数组：http://api.jquery.com/append/

.append（content）| content：要在匹配元素集中的每个元素的末尾插入的一个或多个其他DOM元素，元素数组，HTML字符串或jQuery对象。

Answer 6

有时候，jQuery不是最好的解决方案。如果你有很多要附加到DOM的元素，documentFragment是一个可行的解决方案：

var fragment = document.createDocumentFragment();
for(var i = 0; i < 1000; i++) {
    fragment.appendChild(document.createElement('div'));
}
document.getElementsByTagName('body')[0].appendChild(fragment);

Answer 7

如果你想要原始性能，那么我建议使用纯JS，尽管有些人认为你的开发性能比你的网站/程序性能更重要。检查此link以获取基准和展示不同的DOM插入技术。

编辑：

作为一种好奇心，documentFragment被证明是最慢的方法之一。

Answer 8

我会使用原生Javascript，通常要快得多：

var el = document.getElementById('the_container_id');
var aux;
for(x = 0; x < 1000; x++) {
    aux = document.createElement('div');
    aux.innerHTML = x;
    el.appendChild(aux);
}

编辑：

你去了一个jsfiddle，实现了不同的选项。 @ jackwander的解决方案显然是最有效的解决方案。

Answer 9

我知道，这个问题很旧，但是也许可以帮助其他人。

或简单易用的ECMA6传播算子：

$('body').append(...elements);

jQuery追加一个元素数组

9 个答案: