javascript - 挿入された要素の後に contenteditable div 内にキャレットを設定する

Question

アプリケーションをすべてのブラウザーで実行しようとしていますが、ユーザーがポップアップから選択したテキストの直後に contenteditable div 内にキャレットを配置する必要があります。これまでのところ、私のアプリケーションは IE で動作していますが、Opera、Firefox、および Chrome でも動作させる必要があります。IE にキャレットを配置するための私の Javascript コードは次のようになります。

  function setCaretPos()
  {
     if (document.selection) 
     {
         /* IE */
         var range = document.body.createTextRange();
         range.moveToElementText(editableDiv);
         var insertedSpan = document.getElementById('span' + count);
         var preCaretRange = document.body.createTextRange();
         preCaretRange.moveToElementText(insertedSpan);
         preCaretRange.moveEnd("character", 2);
         range.setEndPoint("EndToEnd", preCaretRange);
         range.collapse(false);
         range.select();
      }
      else
      {
         if (window.getSelection) {
         /* Firefox, Opera, Chrome */
         var sel = window.getSelection();
         if(sel.rangeCount)
         {
            var range = sel.getRangeAt(0);
            var insertedSpan = document.getElementById('span' + count);
            var pos = insertedSpan.innerHTML.length;
            range.selectNodeContents(insertedSpan);
            range.setEndAfter(insertedSpan);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
         }
      }
 }

ご覧のとおり、IE では moveEnd 関数を使用して範囲の末尾を 2 文字右に移動していますが、IE 以外のブラウザでこの関数に相当するものがあるかどうかはわかりません。特定の文字数。上記のコードを使用すると、スパン内のテキストが選択されますが、挿入されたスパンの後にキャレットが表示されず、単に消えてしまうという問題があります。

どんな提案でも大歓迎です。ありがとう！