Javascript DOM tree duplicate for manipulation

Question

Since the DOM tree of a page is active and always reflected in the browser, what is the best way to modify this DOM tree for some purpose without affecting the actual render

Answer 1

Maybe consider one the many great JavaScript librarys out there, e.g. jQuery. These allow you to easily copy parts of or even the whole DOM of an document and have that stored appart from the DOM.

If you need to roll your own solution, a good point to start is Resig's post on document fragments: http://ejohn.org/blog/dom-documentfragments/.

Good luck.

Answer 2

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

Answer 3

If you are willing to use jQuery:

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

clone now is a copy of the element structure.

You can then work off of clone to do whatever experimenting you like.