jQuery - how to append multiple nodes to container

Question

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>');

Why are you mixing document fragments with jQuery. appendChild doesn't take a jQuery object and $.html does not take a DocumentFragment That's what your error is telling you. — Ruan Mendes
– Ruan Mendes, Commented Jun 14, 2012 at 16:34

sparebytes · Accepted Answer · 2012-06-14 16:38:22Z

9

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.

edited Jun 14, 2012 at 16:38

answered Jun 14, 2012 at 16:31

sparebytes

13.2k3 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sadmicrowave Over a year ago

I like this solution a lot. You can sub .append for .html( elmsToAppend ) and it works just ask well. I'm not sure how much faster the fragment option is compared to this, but I do like the use of .add

Ruan Mendes · Accepted Answer · 2012-06-15 17:03:59Z

3

You are mixing document fragments with jQuery, passing the wrong arguments. appendChild doesn't take a jQuery object and $.html does not take a DocumentFragment That's what your error is telling you.

Example 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);

edited Jun 15, 2012 at 17:03

answered Jun 14, 2012 at 16:44

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

2 Comments

sadmicrowave Over a year ago

Thanks for the clarification. My big question is how much faster is utilizing fragment rather than jQuery's .add ? This seems like more work but is the return worth it?

Ruan Mendes Over a year ago

@sadmicrowave Internally, jQuery creates document fragments, so performance it almost the same. See bennadel.com/blog/… Kranklin answer is nice because it doesn't mix standard DOM manipulation with jQuery manipulation. I didn't do that because I wanted to show you that you were passing illegal arguments to functions.

pete · Accepted Answer · 2012-06-14 18:52:16Z

0

$('#some-container').append(fragment.childNodes); will do the job. For a fun example, run this in the console:

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);

The heading will appear at the bottom of the page. (Tested in Chrome, FF7, and IE8)

UPDATE: To clarify how this applies to the code in your 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);

edited Jun 14, 2012 at 18:52

answered Jun 14, 2012 at 16:45

pete

25.2k4 gold badges40 silver badges52 bronze badges

4 Comments

sadmicrowave Over a year ago

this suggestion does not work. I get the same error as my OP

pete Over a year ago

@sadmicrowave: Upon further review, a DocumentFragment does not have an innerHTML property to use. Updated answer with tested, functional code.

sadmicrowave Over a year ago

My OP stated I did not want to use HTML syntax for the element, I need it in object node notation.

pete Over a year ago

@sadmicrowave: I'm confused. $('#some-container').append(fragment.childNodes); is object node notation and will work.

score 0 · Accepted Answer · 2014-02-17 09:12:04Z

0

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

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

edited Feb 17, 2014 at 9:12

answered Feb 13, 2014 at 15:50

user669677

Collectives™ on Stack Overflow

jQuery - how to append multiple nodes to container

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related