In place DOM to DOM mutations, via Incremental DOM.

DISCLAIMER

This came out of curiosity, it's a very inefficient way to use Incremental DOM, and should absolutely not be your pick for new projects.

In old existing codebases that you need to put your hands on, it may help you take advantage of in place mutations and refactor things in a bit more declarative style without modifing your UI DOM generation. For such codebases it comes as a relatively lightweight dependecy (IncrementalDOM is < 10Kb).

Live demos

circles, benchmark to get a measure of inefficiency

Usage

// Make yourself an helper
function patch(target, frag) {
  IncrementalDOM.patch(target, dom2idom, frag)
}

// If you live in JQuery chains
$.fn.patch = function (target) {
  IncrementalDOM.patch(target.get(0), dom2idom, this.get(0))
  return this
}

// If you like the danger or are convinced this should be part of the standard
Element.prototype.patch = function (frag) {
  IncrementalDOM.patch(this, dom2idom, frag)
}

How does it work?

It will take an HTML string, a DOM fragment, or an equivalent plain object, and execute its equivalent Incremental DOM instructions.

In the circles demo you can clearly see the difference between replacing the innerHTML and patching it, from the devtools Elements tab.

Mutating the DOM in place means its current elements instances will be respected, this is of great advantage when updating your UI.

Although not of great help with static content, you can optionally assign elements a key or declare that their descendants should be skipped by assigning attributes to you static DOM fragment <div key="unique" skip="true">, you can change the attrs name in the code. For more on keys and skip usage refere to the Incremental DOM documentation.

DOM equivalent plain object?

An object with the exact same properties as the DOM interface, thus parsable just as real DOM. This gives you serialized cachable DOM without string parsers. You can find two little gists here:

dom2domobj, from DOM fragment or HTML string.

jsonml2domobj, from JSOML.