Question

我想修改DOM子树并在一段时间后恢复它。如何保存子树副本（与实际子树一起使用）？如何在之后恢复保存的副本？

Answer 1

如果我正确阅读，那么我认为您需要做的就是：

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

然后重新附加DomTreeCopy（代替原文）：

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

或者除了原始内容之外还要将它添加到DOM中：

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

参考文献：

Answer 2

使用简单的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表明事件处理程序仍然存在。

Answer 3

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

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

这是你可以在字典类型中存储你想要的所有东西 - 然后再重复使用它。

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

Answer 4

您可以将克隆的对象存储在DOM中的其他位置。修改可见的DOM。当您需要实际值时，您可以从附加的位置跟踪它。

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

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

然后使用$("#oldInfo")

跟踪原始dom

如何克隆（和恢复）DOM子树

4 个答案: