57

出于这个问题的目的，假设我们需要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 添加一堆对象以提高性能？

4

9 回答 9

70

您可以使用空的 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 对象内）。

尽管您的代码似乎与 jQuery 1.8 完美配合。

于 2012-08-24T14:53:33.390 回答
16

你可以打电话

$('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);

.textContentIE<9 不支持，需要条件检查才能使用.innerTextor.text代替。

于 2012-08-24T14:53:16.273 回答
9

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

​$('body')​.append([
    '<b>1</b>',
    '<i>2</i>'   
])​;​
于 2012-08-24T15:04:15.747 回答
9

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

el.append.apply(el, myArray);

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

于 2014-10-31T01:09:38.840 回答
3

对第二种方法稍作改动：

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 对象，插入到匹配元素集中每个元素的末尾。

于 2012-08-24T14:57:46.870 回答
3

有时，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);
于 2012-08-24T14:59:54.740 回答
0

我会使用本机 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 的解决方案显然是最有效的解决方案。

于 2012-08-24T15:03:19.030 回答
0

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

编辑：

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

于 2012-08-24T14:56:42.140 回答
0

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

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

$('body').append(...elements);
于 2019-07-26T12:26:01.460 回答