如何使用javascript毫無疑問地操作HTML DOM元素？

Question

假設我有一個處於contenteditable模式的元素，並且我希望對DOM進行一些操作，同時使更改無法撤消。 我嘗試了一般的createNode，appendChild，removeChild，setAttribute，但它們似乎無法撤消...

有沒有辦法使這些操作無法撤消？ 如何？

Answer 1

不要使整個元素都可編輯，使該元素的每個子元素都可編輯， 例如 ：

<div id = 'main' >
    <div id = 'child1' ></div>
    <div id = 'child2' ></div>
</div>

在這里，您應該使child1和chil2內容可編輯，這樣它們將保留在dow中，並且可以將元素附加到main之外，擔心它們將被刪除。

Answer 2

將舊值存儲在變量中，該變量使您可以通過還原該值來“撤消”。

您可以通過將列ID和舊值保存在cookie / localstorage中的json字符串中來使可撤銷狀態持久化。

Answer 3

哼....做到這一點的最好方法，我的意思是，我想擁有一個可以持續監視用戶輸入的功能，並且用戶輸入的內容都存儲在一個對象中，而刪除的單詞存儲在其他對象中對象或數組，然后如果用戶按ctrl + z，則使用另一個函數查找最后一個退格的單詞並將其添加到現有文本中。 並且這樣做似乎很復雜。

<textarea id="div" contenteditable="true" >
</textarea>
<p id="p">dd </p>

CSS：

#div {
    width:300px;
    height:260px;
    border:2px solid #ff9000;
}

jsvascript：

var div = document.getElementById("div");
div.onkeypress = function(evt){
     var words = [];
    evt  = evt.keyCode;
    var event = String.fromCharCode(evt);
//    alert(event);
    words.push(event);
}

我將為此添加更多...