jQuery - 如何将多个节点附加到容器 [英] jQuery - how to append multiple nodes to container

问题描述

我需要将多个节点附加到一个容器中.与其在每次迭代中都执行缓慢的 DOM 追加，我想将文档片段中的节点(对其他想法开放)中的节点进行排队，并一次性追加所有这些节点.这是我的代码:

var fragment = document.createDocumentFragment();$.each(poFailureInfoMultiple, 函数(i,e){fragment.appendChild($('<按钮/>', {'class': 'el-contents-center 多记录'}));});$('#some-container').html(片段);

我的问题是我收到一条错误消息，说明:

无法转换 JavaScript 参数 arg 0 [nsIDOMDocumentFragment.appendChild]

那么如何一次将多个元素节点附加到我的 DOM 中?我不必使用片段方法(我刚刚发现它并且它似乎可行).

注意:我不想对附加内容使用 HTML 语法

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

解决方案

var elemsToAppend=$()$.each(poFailureInfoMultiple, 函数(i,e){elemsToAppend = elemsToAppend.add($('<按钮/>', {'class': 'el-contents-center 多记录'}))});$('#some-container').append(elemsToAppend)

jQuery 对象上的 add 方法不会改变对象本身，而是返回一个新对象，这就是您需要 elemsToAppend = elemsToAppend.add(...) 的原因.老实说，我不能说这种方法有多快.我实际上认为 html 方式更快.<​​/p>

I need to append multiple nodes to a container. Rather than doing a slow DOM append inside each iteration, I want to queue up the nodes in a document fragment (open to other ideas) and append them all at one time. Here is my code:

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

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

My problem is I am getting an error message stating:

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

So how can I append multiple element nodes to my DOM at once? I don't HAVE to use the fragment method (I just found it and it seemed viable).

Note: I DO NOT WANT TO USE HTML SYNTAX FOR THE APPEND

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

解决方案

var elemsToAppend=$()

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

The add method on a jQuery object doesn't alter the object itself but returns a new object, which is why you need elemsToAppend = elemsToAppend.add(...). I honestly cant say how fast this method is though. I actually think the html way is faster though.

这篇关于jQuery - 如何将多个节点附加到容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！