Question

Is there a way that has better performance than the other when appending a new element to the dom with jQuery?

This is the way I usually do it:

$('<div class="foo">Hello World!</div>').appendTo($("#bar"));

But I’ve seen this quite a few times around :

$('<div/>').attr("class", "foo").text("Hello World!").appendTo($("#bar"));

I think that the first one is easier to read. Second one takes advantage of chaining but it in the end, the result is the same. But is it faster to do it one way of the other?

Answer 1

As you can see here: http://www.jsfiddle.net/SvCTK/

the difference in performance is pretty trivial (maybe not that trivial, find out for yourself). Source for benchmark:

var loop = 1000,
    $bar = $('#bar');

console.time('first')
while(loop--){
    $('<div class="foo">Hello World!</div>').appendTo($bar);
}
console.timeEnd('first');

loop = 1000;
$bar.html('');

console.time('second')
while(loop--){
   $('<div/>').attr("class", "foo").text("Hello World!").appendTo($bar);
}
console.timeEnd('second');

You need a open FireBug or Webkit developers tools to see the results.