jQuery追加一组元素

为了这个问题的目的，可以说我们需要append() 1000个对象到body元素。

你可以这样做：

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

这可以工作，但是对于我来说AFAIK似乎效率低下，这将导致1000个文档重排。 更好的解决scheme是：

 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节点，但假设我需要使用诸如.css()类的元素上的其他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); 

这可能是有用的，如果你想在循环内使用新生成的元素做东西。 但请注意，这将创build一个巨大的内部堆栈元素（在jQuery对象内）。

---

看来，虽然你的代码与jQuery 1.8完美的工作 。

Answer 2

你可以打电话

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

或者你可以在第一个地方创build一个大的string。

 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); 

^{.textContent不被IE <9支持，而需要一个条件检查才能使用.innerText或.text 。}

Answer 3

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

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

Answer 4

由于$ .fn.append需要可变数量的元素，我们可以使用apply将数组作为parameter passing给它：

 el.append.apply(el, myArray); 

这有效果，如果你有一个jQuery对象的数组。 根据规范，尽pipe你可以附加一个元素数组，如果你有DOM元素。 如果你有一个htmlstring数组，你可以直接join（''）它们，并将它们一次追加。

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元素，元素数组，HTMLstring或jQuery对象，以便在匹配元素集合中的每个元素的末尾插入。

Answer 6

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

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

Answer 7

如果你要进行原始性能的话，我会build议纯JS，尽pipe有些人会认为你的开发性能比你的网站/程序性能更重要。 检查这个链接的基准和不同的DOM插入技术的展示。

编辑：

作为一种好奇心， documentFragmentcertificate是最慢的方法之一。

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的解决scheme显然是最有效的解决scheme。