Javascript DOM for tree duplication

Question

Since the DOM tree of the page is active and always displayed in the browser, how can you best change this DOM tree for any purpose without affecting the actual rendered tree? Let's say my goal is to swap some of the child nodes and see how similar the DOM tree remains.

Does a duplicate tree create a single solution? If so, is there a function for this? Or I need to write my own function to create a duplicate copy of the tree. I do not need all the attributes of the element element, so I can create a simpler object with several attributes pointing to siblings and children.

Answer 1

You can use document.cloneNode(true) or the same method for another node. cloneNode clones any node, and true means that it must be recursive (deep). Obviously, this can have significant performance on a large page.

Answer 2

If you want to use jQuery:

 var clone = $("selectorForSomeElement(s)").clone(); 

clone now a copy of the element structure.

Then you can work with the clone to do whatever you like.

Answer 3

Perhaps consider one of the many great JavaScript libraries, for example. JQuery They make it easy to copy parts or even the entire DOM of a document and have this saved appart from the DOM.

If you need to roll your decision, a good start to start is to publish Resig on document fragments: http://ejohn.org/blog/dom-documentfragments/ .

Good luck.