Jak klonować (i przywracać) poddrzewo DOM

Question

Chciałbym zmodyfikować poddrze Dom DOM i przywrócić go po pewnym czasie. Jak mogę zapisać kopię drzewa podarchiwum (aby grać z rzeczywistym poddrzewem)? Jak mogę później przywrócić zapisaną kopię?

Answer 1

Jeśli czytam tego prawa, to myślę, że wszystko, co musisz zrobić to:

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

A następnie ponownie załączyć DomTreeCopy (zamiast oryginalny):

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

lub dodać go do DOM oprócz oryginału:

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

Odniesienia:

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

Answer 2

można użyć $.data() ... metoda

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

było można przechowywać wszystkie waht chcesz w rodzaju słowniku - a następnie używać go później.

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

Answer 3

Możesz przechowywać sklonowany obiekt gdzie indziej w DOM. Zmodyfikuj DOM, który jest widoczny. Gdy potrzebujesz rzeczywistej wartości, możesz śledzić ją z miejsca, do którego dołączyłeś.

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

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

Następnie zapisuje oryginalne DOM z $("#oldInfo")

Answer 4

pomocą prostych 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

Należy pamiętać, że za pomocą tej metody funkcje obsługi zdarzeń są przywracane: , a nie. Ale możesz też je utworzyć, ponieważ są zwykłymi funkcjami.

Okazało się, myliłem się co do tego. Obsługa zdarzeń jest zachowywana, ponieważ jest to oryginalny DOM, który przywracasz. Jeśli kopiowałeś go i dołączałeś w innym miejscu, programy obsługi zdarzeń nie byłyby kopiowane. This demo pokazuje, że procedura obsługi zdarzeń pozostaje.