2

コンテナに複数のノードを追加する必要があります。各反復内で低速のDOM追加を行うのではなく、ドキュメントフラグメント内のノードをキューに入れて（他のアイデアを受け入れる）、一度にすべてを追加したいと思います。これが私のコードです：

var fragment = document.createDocumentFragment();
$.each( poFailureInfoMultiple, function(i,e){
    fragment.appendChild(
         $('<button/>', {
            'class': 'el-contents-center multiple-record'
         })
    );
});

$('#some-container').html( fragment );

私の問題は、次のようなエラーメッセージが表示されることです。

Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]

では、どうすれば複数の要素ノードをDOMに一度に追加できますか？フラグメントメソッドを使用する必要はありません（見つけたばかりで、実行可能であるように見えました）。

注： 追加にHTML構文を使用したくありません

i.e. $('#some-container').append('<button class="myclass"></button>');
4

4 に答える 4

9 
var elemsToAppend=$()

$.each( poFailureInfoMultiple, function(i,e){
    elemsToAppend = elemsToAppend.add(
        $('<button/>', {
            'class': 'el-contents-center multiple-record'
        })
    )
}); 
$('#some-container').append(elemsToAppend)

jQueryオブジェクトのaddメソッドは、オブジェクト自体を変更しませんが、新しいオブジェクトを返します。そのため、が必要elemsToAppend = elemsToAppend.add(...)です。私は正直に言って、この方法がどれほど速いかは言えません。私は実際にはhtmlの方法の方が速いと思います。

于 2012-06-14T16:31:05.573 に答える
3

ドキュメントフラグメントをjQueryと混合し、間違った引数を渡しています。オブジェクトをappendChild取らず、取らないそれはあなたのエラーがあなたに言っていることです。jQuery$.htmlDocumentFragment

例 http://jsfiddle.net/YNLzg/

var fragment = document.createDocumentFragment();
$.each( [1,2,3], function(i,e){
    fragment.appendChild(
         $('<button/>', {
            'class': 'el-contents-center multiple-record'
         })[0] // passing the HTMLElement to appendChild, not a jQuery object
    );
});
// Can't call $.html() and pass it a fragment, call appendChild.
document.getElementById('ct').appendChild(fragment);​
于 2012-06-14T16:44:40.470 に答える
0

$('#some-container').append(fragment.childNodes);仕事をします。楽しい例として、コンソールでこれを実行します。

var f = document.createDocumentFragment();
var div = document.createElement('div');
div.innerHTML = "<h1>This heading was not here before :)</h1>";
f.appendChild(div);
$('body').append(f.childNodes);

見出しはページの下部に表示されます。（Chrome、FF7、およびIE8でテスト済み）

更新：これがOPのコードにどのように適用されるかを明確にするには：

var fragment = document.createDocumentFragment();
$.each(poFailureInfoMultiple, function (i, e) {
    var btn = document.createElement('button');
    btn.cssClass = 'el-contents-center multiple-record';
    fragment.appendChild(btn);
});
$('#some-container').append(fragment.childNodes);
于 2012-06-14T16:45:01.750 に答える
0

append（ demo ）にhtml構文を選択する場合：

$(selector)
  .append(arrayOfContents.map(function(s){return "<span>"+s+"</span>";}).join(''));
于 2014-02-13T15:50:49.323 に答える