この質問の目的で、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に追加してパフォーマンスを改善しますか?
配列の代わりに空の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オブジェクト内)が作成されることに注意してください。
あなただけを呼び出すことができます
$('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
を使用するには条件チェックが必要です。
$ .fn.appendは可変数の要素を取得するため、apply
を使用して引数として配列を渡すことができます。
el.append.apply(el, myArray);
これは、jQueryオブジェクトの配列がある場合に機能します。ただし、仕様によれば、DOM要素がある場合は要素の配列を追加できます。 html文字列の配列がある場合は、それらを.join( '')して、一度にすべて追加できます。
JQuery 1.8にアップグレードすると、これは意図したとおりに機能します。
$('body').append([
'<b>1</b>',
'<i>2</i>'
]);
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);
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オブジェクト。
私は知っている、質問は古いですが、多分それは他の人に役立ちます。
または、単純なECMA6スプレッド演算子を使用します。
$('body').append(...elements);
私は通常、はるかに高速なネイティブ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のソリューションは、明らかに最も効果的なソリューションです。
生のパフォーマンスが必要な場合は、純粋なJSをお勧めしますが、開発パフォーマンスはサイト/プログラムのパフォーマンスよりも重要であると主張する人もいます。これを確認してください link ベンチマークとさまざまなDOM挿入テクニックのショーケースについて。
編集:
好奇心として、documentFragment
は最も遅いメソッドの1つであることがわかります。