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

Answer 1

In general, if I have a lot of html to generate, I collect it all in one string and let the browser generate the elements all at once.

If there will be lots of conditionals or loops involved, then you may want to use Array.join() instead of string concatenation with +. With string concatenation the browser will generate lots of intermediate strings which can be very slow; Array.join() skips all those intermediate strings. For these cases I'd do something like:

var html = ['
Some More Stuff
'];
for (var i = 0; i < 1000; i++) {
    html.push('
Some Loop Content
');
}
$('#parent').append(html.join(''));