Why does cloneNode need to be used when appending a documentFragment?

Question

I\'ve been looking at using documentFragments in a Backbone.js app and was wondering why I see examples where \"cloneNode\" is used when appending the documentFragment to th

Answer 1

I don't think it's necessary. I guess it only was used to detach the aElms from being statically referenced, where they would've need to be removed from their former parents when calling appendChild. It's only for performance in this test.

However, the following code (more similar to the appendChild test) would make more sense to me:

var oFrag = document.createDocumentFragment();
for (var i = 0, imax = aElms.length; i < imax; i++)
    oFrag.appendChild(aElms[i].cloneNode(true));
// using it here:             ^^^^^^^^^^^^^^^^
o.appendChild(oFrag);

Though it might be slower than calling it only once on the whole fragment, where the node tree is recursed with native code.

Also check out http://jsperf.com/cloning-fragments :-)