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

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 $("")...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: jsfiddle.net/Ps5ja/ console. Time('concat'); var html = ""; for(var I = 0; I Some More Stuff'; html += 'Some Conditional Content'; } var elem = $(html); console.

TimeEnd('concat'); //25ms console. Time('DOM'); var parent = $("") for(var j = 0; j '). Append($('', {text :'Some More Stuff'}))); parent.

Append($('',{ text: 'Some conditionalContent' })); } console. TimeEnd('DOM'); //149ms console. Time('concat caching'); var html = ""; for(var I = 0; I TimeEnd('concat caching'); //282ms console.

Time('DOM caching'); var parent = $("") for(var j = 0; j 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.

2 Love to know why the downvote on this. Is the man wrong or not? Enlighten us.

– Dave Markle Apr 22 '10 at 11:43 Agreed: why the downvote, seems pretty sound reasoning to me. I'm not doing thousands of concats, so I think it'll be ok. On a quick sidenote, as far as I'm aware both firefox and chrome use the StringBuilder-style array method of string concatenation these days, so string concats can be pretty fast.

– Ed Woodcock Apr 22 '10 at 11:45 No idea why this was downvoted. +1 from me. – cletus Apr 22 '10 at 12:05.

Favour DOM manipulation over innerHTML methods. For one thing, DOM manipulation will correctly handle characters that need to be escaped with innerHTML. For another, it is typically faster, sometimes much faster.

I'm not using innerHTML at all in either example: this is talking about generation from scratch not direct manipulation of existing elements. This is pretty much just string concatenation vs element creation. – Ed Woodcock Apr 22 '10 at 11:43 @EdWoodcock $("1 2 3") uses innerHTML in implementation so yes you are using innerHTML`.

– cletus Apr 22 '10 at 12:03 Didn't know that, useful info, but i'm initialising the divs in the second example as blank ones (which as far as I'm aware will not use innerHTML? ), and in the first example I'm building from scratch into a string then using append (which I assume does innerHTML, but only the once). – Ed Woodcock Apr 22 '10 at 12:27 Testing by PPK suggests innerHTML is faster (much faster for IE) than DOM manipulation: quirksmode.Org/dom/innerhtml.

Html – Jeffery To Apr 22 '10 at 2:07.

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 Join('')).

AS I said earlier, FF and, as far as I'm aware, Chrome and Opera do this method automatically for string concats, and in FF += is actually faster than the array method. – Ed Woodcock Apr 23 '10 at 8:08 I guess IE won't be supported for your project? – Jeffery To Apr 23 '10 at 9:23.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.