I would like to have a document fragment/element on the shelf to which I've connected a bunch of other elements. Then whenever I want to add one of these element-systems to the DOM, I copy the fragment, add the unique DOM ID and attach it. So, for example:\[code\]var doc = document, prototype = doc.createElement(), // or fragment ra = doc.createElement("div"), rp = doc.createElement("div"), rp1 = doc.createElement("a"), rp2 = doc.createElement("a"), rp3 = doc.createElement("a");ra.appendChild(rp);rp.appendChild(rp1);rp.appendChild(rp2);rp.appendChild(rp3);rp1.className = "rp1";rp2.className = "rp2";rp3.className = "rp3";prototype.appendChild(ra);\[/code\]This creates the prototype. Then I want to be able to copy the prototype, add an id, and attach. Like so:\[code\]var fr = doc.createDocumentFragment(), to_use = prototype; // This step is illegal, but what I want! // I want prototype to remain to be copied again.to_use.id = "unique_id75";fr.appendChild(to_use);doc.getElementById("container").appendChild(fr);\[/code\]I know it's not legal as it stands. I've done fiddles and researched and so on, but it ain't working. One SO post suggested \[code\]el = doc.appendChild(el);\[/code\] returns \[code\]el\[/code\], but that didn't get me far.So... is it possible? Can you create an on-the-shelf element which can be reused? Or do you have to build the DOM structure you want to add from scratch each time? Essentially I'm looking for a performance boost 'cos I'm creating thousands of these suckers Thanks.