Cómo clonar (y restaurar) un subárbol DOM

Question

Me gustaría modificar un subárbol DOM y restaurarlo después de un tiempo. ¿Cómo puedo guardar una copia del subárbol a un lado (para jugar con el subárbol real)? ¿Cómo puedo restaurar la copia guardada después?

Answer 1

Si estoy leyendo esto, entonces creo que todo lo que tenía que hacer es:

var DomTreeCopy = $('parentElementSelector').clone(true,true); 

Y a continuación, volver a colocar el DomTreeCopy (en lugar del original):

$('parentElementSelector').replaceWith(DomTreeCopy); 

o para añadirlo a la DOM, además de los originales:

$(DomTreeCopy).insertAfter($('parentElementSelector')); 

Referencias:

• clone().
• insertAfter().
• replaceWith().

Answer 2

puede utilizar $.data() ... método

$.data(document.body, "sortElement", "0"); //set value 
    $.data(document.body, "sortElement");  //read value 

esto era usted puede almacenar todo waht que quieres en un tipo de diccionario - y luego volver a utilizarlo más adelante.

http://api.jquery.com/jQuery.data/

Answer 3

Puede almacenar el objeto clonado en otro lugar del DOM. Modificar el DOM que está visible. Cuando requiera el valor real, puede rastrearlo desde el lugar donde lo ha agregado.

<div id="oldInfo"></div> 

$("#youActualDom").clone().appendTo("#oldInfo").hide(); 

A continuación, realizar el seguimiento del dom original con $("#oldInfo")

Answer 4

Uso de JavaScript simple:

var elem = document.getElementById('theElement'), 
    backupElem = elem.cloneNode(true); 
// Your tinkering with the original 
elem.parentNode.replaceChild(backupElem, elem); 

Working demo

MDN - cloneNode

MDN - replaceChild

Tenga en cuenta que con este método, sus controladores de eventos son no restaurados. Pero también puedes respaldarlos, ya que son solo funciones normales.

Resulta que estaba equivocado al respecto. Los controladores de eventos se conservan porque es el DOM original que está restaurando. Si estaba copiando y anexándolo a otro lugar, los controladores de eventos no se copiarían. This demo muestra que el controlador de eventos permanece.