Restore Node / Item after it has been changed / deleted from the DOM

Question

I need a way to determine if any DOM Node / Element has been deleted or changed and instantly restore this element to the state it was in before.

I tried to “back up” the node body and set body.innerHTML to its original state each time MutationObserver starts after the first start, but this causes the browser to crash.

Is there any quick way to restore items that have been changed or deleted?

Answer 1

, ( , ). test test #2 : http://codepen.io/zvona/pen/BowXaN?editors=001

HTML:

<div class='preserve'>
  <h1>There can be anything inside this</h1>
  <p>Some content</p>
</div>

<div class='preserve'>
  <p>Some more content</p>
</div>

JS:

var preserved = document.querySelectorAll('.preserve');
var config = { attributes: true, childList: true, characterData: true };

var createFragment = function(elem, i) {
  var frag = document.createElement('div');
  var id = 'id-'+ new Date().getTime() +'-'+ i;
  frag.setAttribute('id', id);
  elem.parentNode.insertBefore(frag, elem);
  elem.dataset.frag = id;
  observer.observe(elem.parentNode, config);
}

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (!mutation.addedNodes.length && mutation.removedNodes.length) {
      Array.prototype.forEach.call(mutation.removedNodes, function(elem) {
        var frag = document.querySelector('#'+ elem.dataset.frag);
        frag.parentNode.replaceChild(elem, frag);
        createFragment(elem, frag.id.split('-')[2]);
      });
    }
  });
});

Array.prototype.forEach.call(preserved, function(preserve, i) {
  createFragment(preserve, i);
});

(aka document.querySelectorAll('*');), , .