How can I "reset" <div> to its original state after it has been modified by JavaScript?
Solution 1:
I would clone the element, instead of saving the content. Then use replaceWith to restore it:
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
Solution 2:
You can use the data attribute to save the state rather than a variable
$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));