0

I am inserting elements into dom dynamically and for that i m using following steps :(jquery) The initial dom structure is as below:

<div parent div>
 </div>
 <div child div template>
</div>
  • clone the parent div using jquery .clone()
  • clone the child div and do manipulation
  • append to the cloned parent
  • do this for all child data
  • (parentdiv original).replaceAll(clonedparent)

Basically i want to clone the parent div in a manner so that it is available as a documentfragment and so that appending doesnt happen on the dom and gain performance .

Will jQuery clone() give the performance advantage by behaving like documentfragment? Or is there a better way to do this? I don't want to construct each child element as HTML string as the structure of them is pretty complex.

Marko
  • 71,361
  • 28
  • 124
  • 158
ams
  • 91
  • 7
  • Are lines 2 and 3 of your sample code backwards? It seems like you want it to be nested divs. – Jimmy Oct 09 '10 at 02:38
  • no they are 2 seperate divs, the first one is the parent div inside which i want to create child divs, the other one is a just a template div to clone and create the child divs inside the parent one.. – ams Oct 09 '10 at 02:53
  • Why do you need to clone the parent div? A cloned element doesn't exist in the document until you insert it in some fashion. – Jimmy Oct 09 '10 at 04:30

1 Answers1

2

jQuery clone() does a plain DOM cloneNode(), except on IE, which inappropriately copies event listeners if you do that. To work around that, on IE jQuery does something utterly ghastly which really you don't want to know about. Which ain't fast.

replaceAll() is also not fast. It has to remove each child node from the DOM (which is particularly slow in jQuery because of its need to check data when removing something from the DOM) and add the new nodes one-by-one.

I don't really see what cloning gets you here really. Just do the manipulations directly on the children. If you've got a lot of manipulations to do and you're triggering relayouts that make it slow, you could temporarily hide the parent or detach it from the document, re-appending it when you're finished.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • Thanks for the detailed answer. I am cloning child elements because i m creating new child elements on the fly and for that i m taking support of the template child element, cloning it and then appending. The children dont exist before hand, hence cant do manipulations by detach , what do I do in this case, i have to create new children using some kind of template.. – ams Oct 09 '10 at 04:09
  • OK, clone-and-append the child, but you don't need to clone the parent as well. You can detach-and-reappend the parent, if you're sure you need to. – bobince Oct 09 '10 at 04:34
  • I hope cloning for many child elements is ok..is there any other way i can get ride of cloning for child elem? – ams Oct 09 '10 at 04:50
  • what's the ghastly thing? – 1252748 Feb 27 '17 at 19:48
  • @1252748 at the time of writing, jQuery grabbed the `outerHTML` of the source node, processed it with regexp to try to remove the random-numbered `jQueryNNNNNN="NNNN"` internal ID attributes (which was unreliable), used regexp some more to extract ` – bobince Feb 28 '17 at 18:29