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

Question

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).

Answer 1

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.

Answer 2

If you don't need form-elements, cloneNode is a real reliable tool ...

-- and in inserting ajax-data it is incredible in efficiency ...

However, as especially IE has a history of having problems with name-attributes, it is inconvenient to address any of these if you insert data ...

-- I don't really understand your XSL(T)-using, to me it sounds like using a gas-station as a (not !-) convenient place to change a 1960 WV to a 2008 Skoda ...

Userely they have some common technology, though it is not used in the same way, computerization in some way is just a minor problem, the major problems is in nearly any other way !o]

Have you got any need for form-elements ?-)

Answer 3

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.