Question

我需要将多个节点附加到容器中。我不想在每次迭代中添加一个缓慢的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？我没有必要使用片段方法（我刚刚找到它，它似乎可行）。

注意： 我不想为APPENDX使用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对象上的add方法不会改变对象本身，但返回一个新对象，这就是你需要elemsToAppend = elemsToAppend.add(...)的原因。老实说，我不能说这种方法有多快。我实际上认为html方式更快。</ p>

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

如果要为追加（demo）选择html语法：

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

jQuery - 如何将多个节点附加到容器

4 个答案: