dom manipulation - Which is better: string html generation or jquery DOM element creation?

Question

Ok, I'm rewriting some vanilla JS functions in my current project, and I'm at a point where there's a lot of HTML being generated for tooltips etc.

My question is, is it better/preferred to do this:

var html = '<div><span>Some More Stuff</span></div>';
if (someCondition) {
    html += '<div>Some Conditional Content</div>';
}
$('#parent').append(html);

OR

var html = $('<div/>').append($('<span/>').append('Some More Stuff'));
if (someCondition) {
    html.append($('<div/>').append('Some conditionalContent');
}
$('#parent').append(html);

?

Answer 1

From a performance standpoint: it depends.

In your short example, it's faster to append the text, since you actually aren't creating any DOM elements until the end. However if you were doing this a lot, then the added time of string concatenation vs the performance of cached document fragments adds up.

When you do $(html) jQuery caches it as a document fragment (provided the string is 512 bytes or less), though there's not much gain if you're caching just $("<div />")...however if you're doing it thousands of times, there is a measurable impact, as string concatenation gets more expensive as your string gets longer, the cached document fragment cost is pretty steady.

Update: Here's some quick examples to see what I mean, use firebug to get the console times here:

You can run this for yourself: http://jsfiddle.net/Ps5ja/

console.time('concat');
var html = "";
for(var i = 0; i < 500; i++) {
    html += '<div><span>Some More Stuff</span></div>';
    html += '<div>Some Conditional Content</div>';
}
var elem = $(html);
console.timeEnd('concat'); //25ms

console.time('DOM');
var parent = $("<div />")
for(var j = 0; j < 500; j++) {
    parent.append($('<div/>').append($('<span/>', {text :'Some More Stuff'})));
    parent.append($('<div/>',{ text: 'Some conditionalContent' }));
}
console.timeEnd('DOM'); //149ms

console.time('concat caching');
var html = "";
for(var i = 0; i < 5000; i++)
    html += '<div><span>Some More Stuff</span></div><div>Some Conditional Content</div>';
var elem = $(html);
console.timeEnd('concat caching'); //282ms

console.time('DOM caching');
var parent = $("<div />")
for(var j = 0; j < 5000; j++)
    parent.append('<div><span>Some More Stuff</span></div><div>Some Conditional Content</div>');
console.timeEnd('DOM caching'); //157ms

Note: the var elem = $(html); in the string test is so we end up creating the same DOM elements, otherwise you're comparing string concatenation to actual DOM creation, hardly a fair comparison, and not really useful either :)

You can see by the above, as the cached fragment is more complex, the more caching makes an impact. In the first test, which is your example without the condition cleaned up a bit, DOM loses because there are lots of little operations going on, in this test (on my machine, but your ratios should be about the same): HTML Contact: 25ms, DOM Manipulation: 149ms.

However, if you can cache the complex fragment, you get the benefit of not creating those DOM elements repeatedly, just cloning them. In the second test DOM wins out, because while the HTML method creates that DOM element collection 5000 times, the second cached method only creates it once, and clones it 5000 times. In this test: HTML Concat: 282ms, DOM Manipulation: 157ms.

I realize this isn't directly in response to your question, but based on comments it seems there's some curiosity about performance, so just giving something you can see/test/play with.