我怎样才能“重置”<div> 被 JavaScript 修改后恢复到原来的状态？

Question

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

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

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

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

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

Answer 1

我会克隆元素，而不是保存内容。 然后使用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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

优雅一点？

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

Answer 7

你基本上有三个选择。

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

Answer 8

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

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

Answer 9

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

.clone()的默认参数是“false”，它不会克隆事件监听器。 如果您将其设置为.clone(true) ，它.clone(true)克隆事件侦听器。 我已经对其进行了测试（使用他的其余答案）并且它有效。

w3schools jQuery clone() 方法

Answer 10

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