Come clonare (e ripristinare) una sottostruttura DOM

Question

Vorrei modificare un sottoalbero DOM e ripristinarlo dopo un po '. Come posso salvare una copia sotto l'albero (per giocare con la sottostruttura attuale)? Come posso ripristinare la copia salvata in seguito?

Answer 1

Se sto leggendo questo diritto, allora penso che tutto quello che avresti bisogno di fare è:

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

E poi ri-collegare il DomTreeCopy (al posto di quella originale):

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

o per aggiungere al DOM in aggiunta a quello originale:

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

Riferimenti:

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

Answer 2

è possibile utilizzare $.data() ... metodo

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

questo è stato è possibile archiviare tutto il livello qualitativo che si desidera in un tipo di dizionario - e poi riutilizzare in un secondo momento.

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

Answer 3

È possibile memorizzare l'oggetto clonato da qualche altra parte nel DOM. Modifica il DOM che è visibile. Quando richiedi il valore reale, puoi rintracciarlo dal luogo in cui ti sei aggiunto.

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

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

quindi, di monitorare il DOM originale con $("#oldInfo")

Answer 4

Utilizzando semplice JavaScript:

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

Nota che utilizzando questo metodo, i gestori di eventi sono non ripristinati. Ma puoi anche aiutarli, dal momento che sono solo funzioni ordinarie.

Si scopre che mi sono sbagliato. I gestori di eventi vengono mantenuti poiché è il DOM originale che stai ripristinando. Se si stava copiando e aggiungendolo altrove, i gestori di eventi non verrebbero copiati. This demo indica che il gestore eventi rimane.