With contenteditable we can edit text. How to edit nodes? Transform them to text and back!

Lets start simple. Serialize to the format browser knows – HTML. Almost every node has innerHTML and outerHTML, wrap in <pre> so it stands out:

Works, though using it is not fun – navigate node in web inspector, call with $0 from console. Lets apply on the node under caret. 

Most of the time caret points on Text, but sometimes (as in <p><br></p>) on element.

Firefox has no baseNode, use anchorNode.

There are many ways activate - console, keyboard listener, bookmarklets.