How can I “reset” <div> to its original state after it has been modified by JavaScript?

问题

I have a DIV with a form in it. When users submit the form and it gets successfully submitted, I replace the form with a simple \"everything is good now\" message:

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

Is there a good way to \"reset\" the div to its \"original state\" as per the HTML it has arrived with? I can only think of actually doing something like this:

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

It doesn\'t look very elegant - I guess there is a better solution for this, no?

回答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

回答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'));

回答3:

What you're doing is not optimal. The best solution would be this:

When the form gets successfully submitted, just hide() the FORM element, and show() the message (which is initially hidden). And then, later, just show() the FORM element and hide() the message.

回答4:

Yeah, the way you have is the way to do it. The DOM does not save the previous states of DIVs, so you need to save that yourself.

回答5:

Somewhat more elegant?

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

回答6:

In my opinion best is to use this:

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

This way you can repeatedly use this to restore your div to original state while keeping the data in "originalState" intact. Worked for me.

回答7:

You have basically three options.

1. Remember your original markup, as you do with your originalState variable above.
2. Use AJAX to re-request the markup. You can do this easily if you have server side code using the $.ajax() method in jQuery.
3. Cause the page to reload.

回答8:

Making call to empty function in jQuery will do it

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

回答9:

This is my very first interaction on this site--I can't comment yet, but this is to @Fleuv's comment on @Josiah Ruddell's answer:

The default parameter for .clone() is "false", which will not clone event listeners. If you make it .clone(true) it clones the event listeners as well. I've tested it (with the rest of his answer) and it works.

w3schools jQuery clone() method

回答10:

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

来源：https://stackoverflow.com/questions/5557641/how-can-i-reset-div-to-its-original-state-after-it-has-been-modified-by-java