I was caught off-guard by the results - it appears that (even after multiple runs) the raw JS implementation is ~100 times (times, not %) faster. Definitely surprised at the drastic difference, although someone please correct me if I missed something in these simple test cases.
Version 10 of your test is really surprising. The raw JS append function just came out 250 times faster than the jquery direct append example, and 750 times faster than jquery append variable. This is on chrome for iOS.
Wow, yeah. Document fragments seem to be even faster than my original createElement. I'm really going to have to re-evaluate how I'm creating new DOM elements.
This is the kind of thing I was hoping to inspire. Sure, use jQuery, but use it wisely. That said, literally never make DOM in it, for so many reasons...
I got different results on Windows XP (don't ask). Using both Firefox 19 and Chrome 25, Direct append came in the fastest with modestly slower performance (around 5-10%) from the other methods.
For some concrete numbers, I updated a JSPerf that I found to include a raw JS implemention.
http://jsperf.com/creating-dom-elements/8
I was caught off-guard by the results - it appears that (even after multiple runs) the raw JS implementation is ~100 times (times, not %) faster. Definitely surprised at the drastic difference, although someone please correct me if I missed something in these simple test cases.
This was with Chrome on Windows, by the way.