jQuery的 - 如何追加到容器的多个节点(jQuery - how to append mult

我需要多个节点添加到一个容器中。 而不是做一个缓慢的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>');

Answer 1:

var elemsToAppend=$()

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

一个jQuery对象上的添加方法不改变物体本身，而是返回一个新的对象，这就是为什么你需要elemsToAppend = elemsToAppend.add(...) 老实说，我不能说这种方法虽然有多快。 其实，我觉得HTML的方式很好，但。

Answer 2:

你是混合文档片段与jQuery，传递错误的参数。 appendChild并不需要一个jQuery对象和$.html并不需要DocumentFragment这就是你的错误是告诉你。

例如 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);​

Answer 3:

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

Answer 4:

如果您会选择追加（HTML语法演示 ）：

$(selector)
  .append(arrayOfContents.map(function(s){return "<span>"+s+"</span>";}).join(''));

文章来源: jQuery - how to append multiple nodes to container