操作后如何重置DOM？答案

【问题标题】：How to reset DOM after manipulation?操作后如何重置DOM？
【发布时间】：2011-12-02 02:03:49
【问题描述】：

我的页面包含一些我使用 jQuery 构建的小向导。

我想让用户重新启动/重置向导并从头开始。

有没有办法不刷新页面？

【问题讨论】：

【解决方案1】：

实现此目的的一种方法是clone() 向导的元素树处于其初始状态，并将其存储在全局变量或文档的data 中：

$(document).data("initialWizard", $("#yourWizard").clone(true));

（请注意，将true 传递给clone() 也会克隆元素数据和事件处理程序，这在您的情况下可能会很方便。）

然后，当您想将向导恢复到其原始状态时，您可以：

$(document).data("initialWizard").replaceAll("#yourWizard");

【讨论】：

网上找到的最好的清洁解决方案。太棒了！

【解决方案2】：

在不刷新页面的情况下重新开始的唯一方法是手动将 DOM 恢复到页面加载时的状态，并恢复任何 javascript 状态。您要么必须记录/记住初始状态，以便可以返回到它，要么跟踪所有增量更改，以便您也可以返回那里。

如果你真的想重新开始，刷新有什么问题？

【讨论】：

这也是一个很好的解决方案，但我想避免再次发布该页面。
@Yair - 为什么要避免重新加载页面？它应该从缓存中加载并且非常快。
@jfriend00 你将如何“记录”初始状态？你能用它覆盖正在运行的 DOM 吗？这是否也会将对象（初始事件处理程序等）的状态完全恢复到首次接收时的状态？
@jj_ - 你不能从纯 JavaScript 中很容易地保存/恢复 DOM 的任意状态（事件处理程序、变量状态、自定义属性等）。这个原始问题的上下文假设您知道原始状态是什么，并且您可以编写代码以通过 javascript 从头开始创建它，或者将当前对象更改回所需状态。可以遍历 DOM 层次结构并保存层次结构外观的快照，然后重新创建这样的层次结构，但前提是您已经知道需要什么事件处理程序和变量状态。
@jfriend00 我在问，因为在类似的问题中，我正在尝试恢复 DOM，就我而言，我确切地知道原始状态是什么。实际上它再简单不过了：我想恢复为一个完全没有脚本的页面服务的“默认”DOM 的状态！如果需要，请在此处查看：stackoverflow.com/questions/19149917/…

【解决方案3】：

与上述类似，这就是我最终要做的。我将整个 jQuery 文档内容存储在 bootup() 函数中（并运行它）。正文的初始内容存储在 originalDOM 变量中。然后在里面我有一个 playAgain 函数，它将 body 的内容设置为 originalDOM，并通过调用 bootup() 函数再次运行整个 jQuery 内容。这一切都将通过单击“.startover”类的按钮来触发。

bootup();
    var bootup = function(){$(document).ready(function(){
    var originalDOM=document.body.innerHTML;
    //jQuery lines of code here
    var playAgain = function(){
        $(".startover").click(function(){
            document.body.innerHTML = originalDOM;
            bootup();
        });
    };
    playAgain();

});};

希望对任何寻找类似内容的人有所帮助，如果有任何我可以改进的地方，很高兴听到反馈！

【讨论】：