如何克隆(和恢复)DOM子树

Question

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

Answer 1

如果我正确读到这个,那么我认为你需要做的就是:

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

然后重新附加DomTreeCopy(代替原件):

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

或者除了原始版本之外还要将它添加到DOM:

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

参考文献:

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

Answer 2

使用简单的JavaScript:

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

工作演示

MDN - cloneNode

MDN - replaceChild

请注意,使用此方法不会还原事件处理程序.但你也可以支持它们,因为它们只是普通的功能.

事实证明,我错了.事件处理程序被保留,因为它是您正在恢复的原始DOM.如果您正在复制它并将其附加到其他位置,则不会复制事件处理程序.此演示显示事件处理程序仍然存在.