如何使用javascript以不可撤销的方式操纵HTML DOM元素？

假设我有一个处于contenteditable模式的元素，我不想对DOM做一些操作，同时使更改可以撤消。我尝试了常规的createNode、appendChild、removeChild和setAttribute，但它们似乎无法撤消

---

有没有办法让这些操作可以撤销？怎么做？

不要使整个元素内容可编辑，而是使该元素内容的每个元素的后代可编辑，例如：

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

---

在这里，您应该使child1和chil2内容可编辑，这样它们将保留在dow中，您可以将元素附加到main wit中，而不用担心它们会被删除。

将旧值存储在变量中，这样您就可以通过恢复该值来“撤消”

---

通过将列ID和旧值保存在cookie/localstorage中的json字符串中，可以使可撤消状态保持不变。

humm。。。。做到这一点的最佳方法，我的意思是，就我所认为的而言，是使用一个函数来保持和监视用户键入的内容，用户键入的内容存储在一个对象中，删除的单词存储在另一个对象或数组中，如果用户按ctrl+z，则使用另一个函数来查找最后一个退格单词并将其添加到现有文本中。这样做似乎很复杂

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

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);
}

---

我会添加更多。。。对此

您所说的可撤消是什么意思？在contenteditable模式（或designMode）中，当我们使用键盘或鼠标修改html时，我们可以使用ctrl+Z来撤消它。然而，正如我上面提到的，在javascript DOM操作之后，我无法撤消它。（1）HTML从何而来？（2） 这和OP的问题有什么关系？。。。

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