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()配列を処理できないことを理解しています。

パフォーマンスを向上させるために、（ DocumentFragmentjQueryノードについては知っていますが、要素で他のjQuery関数を使用する必要があると想定しています）DOMに一度に多数のオブジェクトを追加するにはどうすればよいですか？.css()

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オブジェクト内に）要素の巨大な内部スタックが作成されることに注意してください。

あなたのコードはjQuery1.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ではサポートされていないため、使用する.innerTextか、.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

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オブジェクト。

于 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、最も遅い方法の1つであることがわかります。

于 2012-08-24T14:56:42.140 に答える
0

私は知っています、質問は古いです、しかし多分それは他の人を助けます。

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

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