如何在JavaScript修改后将<div>"重置"为原始状态？

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()消息.