我怎樣才能“重置”<div> 被 JavaScript 修改后恢復到原來的狀態？

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

Answer 4

是的，您擁有的方式就是這樣做的方式。 DOM 不會保存 DIV 的先前狀態，因此您需要自己保存。

Answer 5

在我看來最好是使用這個：

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

這樣你就可以反復使用它來將你的 div 恢復到原始狀態，同時保持“originalState”中的數據完好無損。 為我工作。

Answer 6

優雅一點？

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

Answer 7

你基本上有三個選擇。

1. 記住您的原始標記，就像您對上面的originalState變量所做的一樣。
2. 使用 AJAX 重新請求標記。 如果您有使用 jQuery 中的$.ajax()方法的服務器端代碼，則可以輕松完成此操作。
3. 導致頁面重新加載。

Answer 8

在 jQuery 中調用empty函數就可以了

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

Answer 9

這是我在這個網站上的第一次互動——我還不能發表評論，但這是@Fleuv 對@Josiah Ruddell 的回答的評論：

.clone()的默認參數是“false”，它不會克隆事件監聽器。 如果您將其設置為.clone(true) ，它.clone(true)克隆事件偵聽器。 我已經對其進行了測試（使用他的其余答案）並且它有效。

w3schools jQuery clone() 方法

Answer 10

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