jQuery appending an array of elements

Question

For the purpose of this question lets say we need to append() 1000 objects to the body element.

You could go about it like this:

for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    $('body').append(element);
}

This works, however it seems inefficient to me as AFAIK this will cause 1000 document reflows. A better solution would be:

var elements = [];
for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    elements.push(element);
}
$('body').append(elements);

However this is not an ideal world and this throws an error Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]. I understand that append() can't handle arrays.

How would I using jQuery (I know about the DocumentFragment node, but assume I need to use other jQuery functions on the element such as .css()) add a bunch of objects to the DOM at once to improve performance?

@GeorgeReith the answer you approved is even slower than your first approach. Take a look at the console logs in this jsfiddle jsfiddle.net/du2TN/2 — davids
– davids, Commented Aug 24, 2012 at 15:23
@davids interesting, although it seems my original code works in jQuery 1.8 and is the fastest of the jQuery methods. (updated your JSfiddle) — George Reith
– George Reith, Commented Aug 24, 2012 at 15:29
Nice to know :) Anyway, @jAndi and jackwander's solution is much faster. But if you prefer to use jQuery, whatever fits you :) — davids
– davids, Commented Aug 24, 2012 at 15:35
@davids I need to use jQuery as they must be jQuery objects so that I can use other jQuery functions in them. — George Reith
– George Reith, Commented Aug 24, 2012 at 16:57

Felix Kling · Accepted Answer · 2012-08-24 15:18:20Z

72

You could use an empty jQuery object instead of an array:

var elements = $();
for(x = 0; x < 1000; x++) {
    elements = elements.add('<div>'+x+'</div>');
    // or 
    // var element = $('<div>'+x+'</div>');
    // elements = elements.add(element);
}
$('body').append(elements);

This might be useful if you want to do stuff with newly generated element inside the loop. But note that this will create a huge internal stack of elements (inside the jQuery object).

It seems though that your code works perfectly fine with jQuery 1.8.

edited Aug 24, 2012 at 15:18

answered Aug 24, 2012 at 14:53

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

9 Comments

George Reith Over a year ago

My actual testing solution is a little more complicated, each element should be a jquery object in its own right so that you can perform other jQuery functions on it. My bad for simplifying the test case too much. Updated question to reflect this.

Felix Kling Over a year ago

But then using .add and inserting the final jQuery object should work nevertheless.

George Reith Over a year ago

Ooops you are right, I forgot that add doesn't update the original copy.

Felix Kling Over a year ago

@George: Apparently the .append behaviour changed with jQuery 1.8. It works with arrays of jQuery objects as well now. This is your code: jsfiddle.net/7Q6wm/2. I assume you used an older version.

Scott Jungwirth Over a year ago

doesn't work in older versions of jQuery, use the document.createDocumentFragment method described by @jackwanders

|

Joseph Silber · Accepted Answer · 2012-08-26 17:24:44Z

17

You could just call

$('body').append(elements.join(''));

Or you can just create a large string in the first place.

var elements = '';
for(x = 0; x < 1000; x++) {
    elements = elements + '<div>'+x+'</div>';
}
$(document.body).append(elements);

Like you mentioned, probably the most "correct" way is the usage of a DocFrag. This could look like

var elements = document.createDocumentFragment(),
    newDiv;
for(x = 0; x < 1000; x++) {
    newDiv = document.createElement('div');
    newDiv.textContent = x;
    elements.append( newDiv );
}
$(document.body).append(elements);

^{.textContent is not supported by IE<9 and would need an conditional check to use .innerText or .text instead.}

edited Aug 26, 2012 at 17:24

Joseph Silber

221k59 gold badges369 silver badges293 bronze badges

answered Aug 24, 2012 at 14:53

jAndy

237k57 gold badges313 silver badges363 bronze badges

3 Comments

jAndy Over a year ago

@JosephSilber: nothing wrong with using += of course. I just wanted to be more explicit and expresive here.

George Reith Over a year ago

Thanks Andy but I fear I oversimplified my test case (my bad), I should of made each element its own object so that you can perform jQuery functions like .css() on them. I updated the test case in the question.

Joseph Silber Over a year ago

Shouldn't that be newDiv.textContent = x;?

Alexey Lebedev · Accepted Answer · 2012-08-24 15:04:15Z

10

Upgrade to jQuery 1.8, this works as intended:

$('body').append([
    '<b>1</b>',
    '<i>2</i>'   
]);

answered Aug 24, 2012 at 15:04

Alexey Lebedev

12.2k4 gold badges42 silver badges49 bronze badges

Comments

Jethro Larson · Accepted Answer · 2014-10-31 01:09:38Z

9

Since $.fn.append takes a variable number of elements we can use apply to pass the array as arguments to it:

el.append.apply(el, myArray);

This works if you have an array of jQuery objects. According to the spec though you can append an array of elements if you have the DOM elements. If you have an array of html strings you can just .join('') them and append them all at once.

answered Oct 31, 2014 at 1:09

Jethro Larson

2,3751 gold badge24 silver badges24 bronze badges

1 Comment

Dovev Hefetz Over a year ago

Thanks. This is the answer if you're stuck with JQuery < 1.8

Draculater · Accepted Answer · 2012-08-24 14:57:46Z

3

A slight change to your second approach:

var elements = [],
newDiv;
for (x = 0; x < 1000; x++) {
    newDiv = $('<div/>').text(x);
    elements.push(newDiv);
}
$('body').append(elements);

$.append() certainly can append an array: http://api.jquery.com/append/

.append(content) | content: One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.

answered Aug 24, 2012 at 14:57

Draculater

2,2971 gold badge25 silver badges29 bronze badges

1 Comment

Felix Kling Over a year ago

jQuery was very strict in this regard. When it says "array of elements", it really means DOM elements, not jQuery objects. And indeed, using 1.7.2, this code does not work, but it works in 1.8.

jackwanders · Accepted Answer · 2012-08-24 14:59:54Z

3

Sometimes, jQuery isn't the best solution. If you have a lot of elements to append to the DOM, documentFragment is a viable solution:

var fragment = document.createDocumentFragment();
for(var i = 0; i < 1000; i++) {
    fragment.appendChild(document.createElement('div'));
}
document.getElementsByTagName('body')[0].appendChild(fragment);

answered Aug 24, 2012 at 14:59

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

2 Comments

Mitar Over a year ago

Doesn't jQuery use document fragment internally in the case you pass in an array? From the error above it definitely seems so.

Scott Jungwirth Over a year ago

Thanks! This worked for me; I'm working on a project that is using an older version of jQuery that didn't handle arrays but works fine with createDocumentFragment.

MalSu · Accepted Answer · 2012-08-24 14:56:42Z

0

If you're going for raw performance then I would suggest pure JS, though some would argue that your development performance is more important than your site's/program performance. Check this link for benchmarks and a showcase of different DOM insertion techniques.

edit:

As a curiosity, documentFragment proves to be one of the slowest methods.

answered Aug 24, 2012 at 14:56

MalSu

5413 silver badges11 bronze badges

3 Comments

jackwanders Over a year ago

that jsPerf is wrapping documentFragment in a $() call, which is probably what's slowing it down. documentFragment is still useful if you go for a pure JS solution.

Felix Kling Over a year ago

This is test is a weird mix of DOM and jQuery, I don't thing it is very conclusive.

MalSu Over a year ago

It uses jQuery's each, but the actual appending is done using different methods.

davids · Accepted Answer · 2012-08-24 15:13:23Z

0

I would use native Javascript, normally much faster:

var el = document.getElementById('the_container_id');
var aux;
for(x = 0; x < 1000; x++) {
    aux = document.createElement('div');
    aux.innerHTML = x;
    el.appendChild(aux);
}

EDIT:

There you go a jsfiddle with different options implemented. The @jackwander's solution is, clearly, the most effective one.

edited Aug 24, 2012 at 15:13

answered Aug 24, 2012 at 15:03

davids

6,3613 gold badges33 silver badges50 bronze badges

2 Comments

jackwanders Over a year ago

you're still doing 1000 separate appendChild operations, which will be slow.

davids Over a year ago

@jackwanders you are completely right, I've implemented your solution mine one and is clearly faster, it can be seen in the jsfiddle I've attached

shaedrich · Accepted Answer · 2019-07-26 12:26:01Z

0

I know, the question is old, but maybe it helps others.

Or simple use ECMA6 spread operator:

$('body').append(...elements);

answered Jul 26, 2019 at 12:26

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

Collectives™ on Stack Overflow

jQuery appending an array of elements

9 Answers 9

9 Comments

3 Comments

Comments

1 Comment

1 Comment

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

9 Comments

3 Comments

Comments

1 Comment

1 Comment

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related