How to undoably manipulate HTML DOM elements with javascript?

Question

Say I have an element in contenteditable mode and I wan't to do some manipulation with the DOM, while make the changes undo-able. I tried general createNode, appendChild, removeChild, setAttribute but they don't seem to be undo-able...

Is there a way to make these manipulation undo-able? And How?

Answer 1

don't make the entire element contenteditable, make each element descendent of that element contenteditable, for example :

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

here you should make child1 and chil2 contenteditable, this way they will remain in the dow, and you can append elements to main wihtout worrying that they will be deleted.

Answer 2

Store the old value in a variable, which enables you to "undo" by restoring that value.

You can make the undo-able state persist by saving the column ids and old values in a json string in a cookie/localstorage.

Answer 3

humm.... the best way to do this, i mean as far as i think is to have a function that keeps and eye on the user typing and what ever the user has typed is stored in a object and the removed words in other object or an array, then if user press ctrl+z then another function to look for the last backspaced word and the add it into the existing text. and to do this seems complicated.

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

i will be adding more... to this