How should I add multiple identical elements to a div with jQuery

Question

I need to add multiple empty divs to a container element using jQuery.

At the moment I am generating a string containing the empty html using a loop

divstr = '<div></div><div></div>...<div></div>';

and then injecting that into my container:

$('#container').html(divstr);

Is there a more elegant way to insert multiple, identical elements?

Edit: I'm hoping to find something that wouldn't break chaining but wouldn't bring the browser to its knees. A chainable .repeat() plugin?

Answer 1

You can use a regular loop with the Jquery append function.

for(i=0;i<10; i++){
    $('#container').append("<div></div>");
}

Answer 2

If you want IE to be fast - or generally consider speed, then you'll want to build up a DOM fragment first before inserting it.

John Resig explains the technique and includes a performance benchmark:

http://ejohn.org/blog/dom-documentfragments/

var i = 10, 
    fragment = document.createDocumentFragment(), 
    div = document.createElement('div');

while (i--) {
    fragment.appendChild(div.cloneNode(true));
}

$('#container').append(fragment);

I realise it's not making a lot of use of jQuery in building up the fragment, but I've run a few tests and I can't seem to do $(fragment).append() - but I've read John's jQuery 1.3 release is supposed to include changes based on the research linked above.

Answer 3

The fastest way to do this is to build the content first with strings. It is MUCH faster to work with strings to build your document fragment before working with the DOM or jquery at all. Unfortunately, IE does a really poor job of concatenating strings, so the best way to do it is to use an array.

var cont = []; //Initialize an array to build the content
for (var i = 0;i<10;i++) cont.push('<div>bunch of text</div>');
$('#container').html(cont.join(''));

I use this technique a ton in my code. You can build very large html fragments using this method and it is very efficient in all browsers.

Answer 4

You can wrap a native JavaScript array in a jQuery and use map() to transform it into a jQuery (list of DOM nodes). This is officially supported.

$(['plop', 'onk', 'gloubi'])
.map(function(text, i)
{
    return $('<div/>').text(text).get(0);
})
.appendTo('#container');

This will create

<div id="container">
<div>plop</div>
<div>onk</div>
<div>gloubi</div>
</div>

I often use this technique in order to avoid repeating myself (DRY).