How to set caret/cursor position in a contenteditable div between two divs.

Question

Consider the following contenteditable div.

bold text
bold text
         


        
      

Answer 1

Another thing you can do is use a Mutation Observer to catch the mutations and then fix them up after the fact. In my use case I was fortunate in that each element had predefined text. When the mutation observer fires, I simply moved changed text to a new text node before or after the element as appropriate. This seems a lot easier than the other options because the observer fires for all changes to character data, and it also has a proper record of all of the changes, unlike say keypress event.