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 to activate - console, keyboard listener, bookmarklets.