javascript - 在用JavaScript修改<div>后，如何将其回复到原始状态？

我有一个带有表格的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);

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

最佳答案

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