So with the documentFragment and createTextNode are almost as fast, but the documentFragment is better used if you want to insert more than one nodes (before/after) some element. Of course you could also check with if it matters if the to-be-inserted nodes are just textnodes or a bit more than that.
I remember some earlier threads about jsperf though (eg. http://groups.google.com/group/mootools-users/browse_thread/thread/bd1a7b3f791883ea/a2ceabf028e64ac1) so comparing the inject/destroy vs two mentioned before is not really a good comparison probably (I mean comparing the vanilla js with the moo-methods is a bit "silly") On May 25, 3:33 pm, robdb <[email protected]> wrote: > Out of interest, put the above methods into jsperf. Plus a > 'createTextNode' method clone without caching the $$ function, always > going to be slower, little surprised by how much though. Apparently > IE6 (under a virtual machine) performs better than Opera 11.10 apart > from the Inject-Destroy method where it failed with the ol 'Object > does not support this prop or method'. > Didn't include the fiddle I put up previously, compared to the > documentFragment and createTextNodemethods, it was sluggish (and very > 2am not awsome...), always a little slower than 'Inject-Destroy'. > > http://jsperf.com/docfrag-textnode-insertion > > On May 25, 6:37 pm, Rolf -nl <[email protected]> wrote: > > > > > of course, you're right > > > On May 24, 10:51 pm, Michael Russell <[email protected]> wrote: > > > > you really don't need a fragment for that. > > > > this: > > > > var elements = $$('span'); > > > elements.each(function(elm){ > > > var fragment = document.createDocumentFragment(); > > > fragment.appendChild(document.createTextNode('X')); > > > elm.parentNode.insertBefore(fragment, elm.nextSibling); > > > > }); > > > > could just be: > > > > var elements = $$('span'); > > > elements.each(function(elm){ > > > var txtNode = document.createTextNode('X') > > > elm.parentNode.insertBefore(txtNode, elm.nextSibling); > > > > }); > > > > Fragments are really nice when you don't want to inject a wrapper element > > > but want to insert n+1 nodes into the DOM. Using it will cause the browser > > > to only re[paint/structure] the DOM once when injecting them instead of on > > > each iteration of your elements array
