如何通过JavaScript修改<div>到原来的状态？

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

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

有没有一种很好的方法来“重置”div到它的“原始状态”按照它已经到达的HTML？ 我只能想到实际做这样的事情：

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

它看起来不是很高雅 – 我猜这有更好的解决scheme，不是吗？

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属性来保存状态而不是variables

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

Answer 3

是的，你有办法做到这一点。 DOM不保存以前的DIV状态，所以你需要自己保存。

Answer 4

你在做什么不是最佳的。 最好的解决办法是这样的：

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

Answer 5

有点更优雅？

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

Answer 6

你基本上有三个select。

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

Answer 7

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

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

这样你可以重复使用这个来恢复你的div到原来的状态，同时保持原始数据的“originalState”。 为我工作。