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
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
There are many ways activate - console, keyboard listener, bookmarklets.