Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How efficient is element.cloneNode(true) (deep clone)?

Tags:

I'm building the HTML code within an XML DOM object to be used as the contents of the innerHTML of a div element using an XSL template. Traditionally we create a new XML DOM document and add the input parameters as XML Elements for the transform via javascript. This is all very time-consuming as we are basically hand picking the data from another XML document that represents our current account and copying the data into a transient XML DOM document.

What I'd like to do is clone the relevant node of the account document (i.e. customer info) and use it as the basis for the transform. I don't want to use the account document directly as I'd like to be able to add transform specific input, without making changes to the account object.

How efficient is using .cloneNode(true) for a desired node of about typically less than 200 elements from a document of typically 2000+ elements? The target platform is IE6 with no external tools (i.e. ActiveX).

like image 674
JoelB Avatar asked Nov 07 '08 18:11

JoelB


2 Answers

CloneNode is pretty efficient but it will be consuming more memory doing it that way.

Another approach to consider is to use a Template object and a processor, pass your additional/changed data as parameters to the processor and the element that you would have otherwise cloned as the input element. This approach would require fairly significant mods the XSL though.

like image 138
AnthonyWJones Avatar answered Oct 16 '22 18:10

AnthonyWJones


IE will fail on certain things.

e.g. checked radio/checkboxes will not be checked when you add your copy to the DOM.

Example:

http://webbugtrack.blogspot.com/2008/03/bug-199-cant-clone-form-element-in-ie.html

http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

To see what IE will actually return, try replacing the url with this in the Address Bar of one of your pages, and press enter.

javascript:'<xmp>'+window.document.body.outerHTML+'</xmp>';

If you are happy with the results, great!, but I think you'll end up less than satisfied at what IE returns (both in the DOM, and this "string" value equivelant.

like image 25
scunliffe Avatar answered Oct 16 '22 20:10

scunliffe