jQuery附加一个元素数组

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

你可以打电话

$('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.textContent，需要进行条件检查才能改用.innerText 或.text。}

Answer 2

你可以使用一个空的 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 3

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

编辑：

出于好奇，documentFragment 被证明是最慢的方法之一。

Answer 4

对第二种方法稍作改动：

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(内容) |内容：一个或多个附加 DOM 元素、元素数组、HTML 字符串或 jQuery 对象，插入到匹配元素集中每个元素的末尾。

Answer 5

有时，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 6

我会使用原生 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 7

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

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

Answer 8

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

el.append.apply(el, myArray);

如果您有一个 jQuery 对象数组，则此方法有效。根据规范，如果你有 DOM 元素，你可以附加一个元素数组。如果你有一个 html 字符串数组，你可以 .join('') 它们并一次性追加它们。

Answer 9

我知道，这个问题很老了，但也许它对其他人有帮助。

或者简单的使用ECMA6扩展运算符：

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