如何克隆（並恢復）DOM子樹

Question

我想修改DOM子樹並在一段時間後恢復它。我怎樣才能將子樹副本保存在一邊（與實際的子樹一起玩）？之後如何恢復保存的副本？

Answer 1

如果我讀這個權利，那麼我認爲，所有你需要做的是：

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

然後重新裝上DomTreeCopy（代替原來的）：

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

還是要另外它添加到DOM原文：

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

個

參考文獻：

• clone()。
• insertAfter()。
• replaceWith()。

Answer 2

可以使用$.data() ...方法

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

這是你可以存儲所有你想在一個字典類型啥子 - 再後來重用。

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

Answer 3

您可以將克隆的對象存儲在DOM中的其他位置。修改可見的DOM。當你需要實際值時，你可以從你追加的地方追蹤它。

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

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

然後跟蹤與$("#oldInfo")

Answer 4

原來DOM使用簡單的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

請注意，使用此方法，您的事件處理程序是 而不是已恢復。但是你也可以支持它們，因爲它們只是普通的功能。

原來，我錯了。事件處理程序被保留，因爲它是您要還原的原始DOM。如果您正在複製它並將它附加到別處，則不會複製事件處理程序。 This demo顯示事件處理程序保持不變。