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对象$.html也不带 aDocumentFragment这就是你的错误告诉你的。

示例 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

If you would choose html syntax for append (demo):

$(selector)
  .append(arrayOfContents.map(function(s){return "<span>"+s+"</span>";}).join(''));
于 2014-02-13T15:50:49.323 回答
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 回答