<div> 被 JavaScript 修改后如何“重置”到它的原始状态？

How can I "reset" <div> to its original state after it has been modified by JavaScript?

提问by abolotnov

I have a DIV with a form in it. When users submit the form and it gets successfully submitted, I replace the form with a simple "everything is good now" message:

我有一个带有表单的 DIV。当用户提交表单并成功提交时，我用一个简单的“现在一切都很好”消息替换表单：

$("#some_div").html("Yeah all good mate!");

Is there a good way to "reset" the div to its "original state" as per the HTML it has arrived with? I can only think of actually doing something like this:

有没有一种好方法可以根据它随附的 HTML“重置”div 到它的“原始状态”？我只能想到实际做这样的事情：

//before I change the DIV
var originalState = $("#some_div").html();
//manipulate the DIV
//...
//push the state back
$("#some_div").html(originalState);

It doesn't look very elegant - I guess there is a better solution for this, no?

它看起来不是很优雅 - 我想有一个更好的解决方案，不是吗？

回答by Josiah Ruddell

I would clonethe element, instead of saving the content. Then use replaceWithto restore it:

我会克隆元素，而不是保存内容。然后使用replaceWith来恢复它：

var divClone = $("#some_div").clone(); // Do this on $(document).ready(function() { ... })

$("#some_div").html("Yeah all good mate!"); // Change the content temporarily

// Use this command if you want to keep divClone as a copy of "#some_div"
$("#some_div").replaceWith(divClone.clone()); // Restore element with a copy of divClone

// Any changes to "#some_div" after this point will affect the value of divClone
$("#some_div").replaceWith(divClone); // Restore element with divClone itself

回答by Vadim

You can use the data attribute to save the state rather than a variable

您可以使用 data 属性来保存状态而不是变量

$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));

回答by ?ime Vidas

What you're doing is not optimal. The best solution would be this:

你正在做的不是最优的。最好的解决方案是这样的：

When the form gets successfully submitted, just hide()the FORM element, and show()the message (which is initially hidden). And then, later, just show()the FORM element and hide()the message.

当表单成功提交时，只有hide()FORM 元素和show()消息（最初是隐藏的）。然后，稍后，只有show()FORM 元素和hide()消息。

回答by Rocket Hazmat

Yeah, the way you have is the way to do it. The DOM does not save the previous states of DIVs, so you need to save that yourself.

是的，您拥有的方式就是这样做的方式。DOM 不会保存 DIV 的先前状态，因此您需要自己保存。

回答by andrhamm

Somewhat more elegant?

优雅一点？

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState);

回答by Saurabh

In my opinion best is to use this:

在我看来最好是使用这个：

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState.clone());

This way you can repeatedly use this to restore your div to original state while keeping the data in "originalState" intact. Worked for me.

这样你就可以反复使用它来将你的 div 恢复到原始状态，同时保持“originalState”中的数据完好无损。为我工作。

回答by Devin Burke

You have basically three options.

你基本上有三个选择。

1. Remember your original markup, as you do with your originalStatevariable above.
2. Use AJAX to re-request the markup. You can do this easily if you have server side code using the $.ajax()method in jQuery.
3. Cause the page to reload.

1. 记住您的原始标记，就像处理originalState上面的变量一样。
2. 使用 AJAX 重新请求标记。如果您有使用$.ajax()jQuery 中的方法的服务器端代码，则可以轻松完成此操作。
3. 导致页面重新加载。

回答by Devraj Giri

Making call to emptyfunction in jQuery will do it

empty在 jQuery 中调用函数就可以了

$(".div").empty();

回答by hypo644

This is my very first interaction on this site--I can't comment yet, but this is to @Fleuv's comment on @Josiah Ruddell's answer:

这是我在这个网站上的第一次互动——我还不能发表评论，但这是@Fleuv 对@Josiah Ruddell 的回答的评论：

The default parameter for .clone()is "false", which will not clone event listeners. If you make it .clone(true)it clones the event listeners as well. I've tested it (with the rest of his answer) and it works.

的默认参数.clone()是“false”，它不会克隆事件侦听器。如果你.clone(true)让它克隆事件监听器。我已经测试过它（用他的其余答案）并且它有效。

w3schools jQuery clone() method

w3schools jQuery clone() 方法

回答by sheischiin

var originalState = $("#some_div").clone(true, true);
$("#some_div").replaceWith(originalState.clone(true, true));