cloning / duplicating html nodes including their styles

Question

I recently started working on cloning display objects.

I have observed there are basically two ways of cloning nodes:

1) I have tried cloning nodes with "cloneNode" method, which is pretty good but is not supported in old browsers.

var newNode = oldNode.cloneNode(deep);

cloneNode Reference MDN

2) For older browsers I am trying to copy outerHTML and set the value to the the innerHTML. Like

newNode.innerHTML = oldNode.outerHTML

NOTE:

For some old versions of internet explorer, innerHTML is a read-only property for table elements.

What is the best of the above methods or is there any other best method. Please help me.

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

Have you tried jquery's $.clone method? http://api.jquery.com/clone/

$( "#oldNode" ).clone().appendTo( "#newNode" );

EDIT: ahh I see your problem is innerHtml is read only in ie tables

This answer provides a workaround for innerHtml in an ie table row

function setTBodyInnerHTML(tbody, html) {
  var temp = tbody.ownerDocument.createElement('div');
  temp.innerHTML = '<table>' + html + '</table>';

  tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);
}

edited May 23 '17 at 11:57

Community

1
1

answered Feb 13 '14 at 14:08

actual_kangaroo

5,971
2
31
45

Thanks. Could you please elaborate? – Feb 13 '14 at 14:09
this is trickyer than I thought, updated my answer to two things to try if you haven't already – actual_kangaroo Feb 13 '14 at 14:23
I tried jQuery clone method, its good but I am looking for pure javascript solution. – Feb 13 '14 at 14:32

cloning / duplicating html nodes including their styles

1 Answers1