web-dev-qa-db-ja.com

要素の配列を追加するjQuery

この質問の目的で、body要素に対してappend() 1000個のオブジェクトが必要だとしましょう。

あなたはこのようにそれについて行くことができます：

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

これは機能しますが、私の知る限り、これは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 ノードについては知っていますが、.css()などの要素で他のjQuery関数を使用する必要があると仮定して）オブジェクトを一度にDOMに追加してパフォーマンスを改善しますか？

javascriptjqueryarraysperformanceappend
47
George Reith

配列の代わりに空の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でコードは完全に機能します.

59
Felix Kling

あなただけを呼び出すことができます

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

.textContentはIE <9ではサポートされていないため、代わりに.innerTextまたは.textを使用するには条件チェックが必要です。

13
jAndy

$ .fn.appendは可変数の要素を取得するため、applyを使用して引数として配列を渡すことができます。

el.append.apply(el, myArray);

これは、jQueryオブジェクトの配列がある場合に機能します。ただし、仕様によれば、DOM要素がある場合は要素の配列を追加できます。 html文字列の配列がある場合は、それらを.join（ ''）して、一度にすべて追加できます。

8
Jethro Larson

JQuery 1.8にアップグレードすると、これは意図したとおりに機能します。

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

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

2番目のアプローチへのわずかな変更：

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）|内容：一致する要素のセットの各要素の最後に挿入する1つ以上の追加のDOM要素、要素の配列、HTML文字列、またはjQueryオブジェクト。

3
Dog

私は知っている、質問は古いですが、多分それは他の人に役立ちます。

または、単純なECMA6スプレッド演算子を使用します。

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

私は通常、はるかに高速なネイティブ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のソリューションは、明らかに最も効果的なソリューションです。

0
davids

生のパフォーマンスが必要な場合は、純粋なJSをお勧めしますが、開発パフォーマンスはサイト/プログラムのパフォーマンスよりも重要であると主張する人もいます。これを確認してください link ベンチマークとさまざまなDOM挿入テクニックのショーケースについて。

編集：

好奇心として、documentFragmentは最も遅いメソッドの1つであることがわかります。

0
MalSu