Place a carriage outside an inserted label in ContentEditable

Question

I insert the span tag in the contentEditable div using the document.execCommand insertHTML method.

After the insertion, I want the carriage to be installed at the end of the input, so that any additional input is outside the last inserted span tag. The default behavior, at least in Chrome, should place an additional input inside the tag itself.

Answer 1

The terrible hack I came up with is to insert another span immediately after the word:

 document.execCommand('insertHTML', false, '<span>&nbsp;</span>'); 

Now the new content goes into this span element. We hope there is a better solution.

Answer 2

I, too, got stuck on this until I tried it. Put   at the end of your insert as in

 document.execCommand('insertHTML', false, '<span>&nbsp;</span>&nbsp;'); 

Just placing a space at the end of your HTML file will not work, since I found that it is always trimmed.