如何在操作后重置DOM

How to reset DOM after manipulation?

本文关键字：DOM 操作      更新时间：2023-09-26

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

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

有没有办法在不刷新页面的情况下做到这一点?

实现此目的的一种方法是将向导的元素树克隆为初始状态，并将其存储在全局变量中或文档的数据中:

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

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

然后，当您想要将向导恢复到原始状态时，您可以这样做:

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

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

如果你真的想重新开始，刷新一下有什么不好?

与上面类似，这是我最后做的。我将整个jQuery文档内容存储在一个bootup()函数中(并运行它)。主体的初始内容存储在一个originalDOM变量中。然后，我有一个playAgain函数，它将body的内容设置为原始dom，并通过调用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();
});};

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

相关文章：