create - ¿Cómo puedo "restablecer"<div> a su estado original después de que haya sido modificado por JavaScript?

jquery create element

Question

Tengo un DIV con una forma en él. Cuando los usuarios envían el formulario y se envía con éxito, lo reemplazo por un simple mensaje "Todo está bien ahora":

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

¿Hay una buena manera de "restablecer" el div a su "estado original" según el HTML con el que ha llegado? Solo puedo pensar en hacer algo como esto:

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

No se ve muy elegante, creo que hay una mejor solución para esto, ¿no?

Answer 1

¿Algo más elegante?

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

Answer 2

En mi opinión, lo mejor es usar esto:

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

De esta forma, puede usar esto repetidamente para restaurar su div al estado original mientras mantiene intactos los datos en "originalState". Trabajó para mi.

Answer 3

Lo que estás haciendo no es óptimo. La mejor solución sería esta:

Cuando el formulario se envía correctamente, simplemente hide() el elemento FORM y show() el mensaje (que inicialmente está oculto). Y luego, más tarde, simplemente show() el elemento FORM y hide() el mensaje.

Answer 4

Me gustaría clonar el elemento, en lugar de guardar el contenido. Luego use replaceWith para restaurarlo:

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 5

Puede usar el atributo de datos para guardar el estado en lugar de una variable

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

Answer 6

Sí, la forma en que lo tienes es la forma de hacerlo. El DOM no guarda los estados anteriores de DIV, por lo que debe guardarlo usted mismo.

Answer 7

Tienes básicamente tres opciones.

1. Recuerde su marcado original, como lo hace con su variable StateState anterior.
2. Use AJAX para volver a solicitar el marcado. Puede hacer esto fácilmente si tiene un código del lado del servidor usando el método $.ajax() en jQuery.
3. Causa que la página se vuelva a cargar.