javascript - JavaScriptを介して子要素を更新した後、ContentEditable「div」でキャレット（カーソル）位置を保持します

Question

JavaScript で更新した後、コンテンツ編集可能な div のキャレット位置を保持するのに苦労しています。

contenteditable 属性を持つ div があります。

<div id="form", contenteditable="true">
</div>

ユーザーが「Bacon is so good! I want more」と入力したとします。特定の単語をスパンでラップした div 内の html を更新します。上記の html から、次のようになります。

<div id="form", contenteditable="true">
   Bacon is so <span>good</span>! I want more!
</div>

jQueryを使用してhtmlを更新することでこれを行います...

$('#form').html(...here I put the updated html...)

ただし、この後、キャレット (カーソル) は div の先頭に戻ります。ユーザーが問題なく入力を続けられるように、div を更新する前と同じ位置にキャレットを保持したいと考えています。

現在、次のコードがあります。

div を更新する前に、まずキャレットの位置を保存します。

if(window.getSelection) {
    window.savedRange = window.getSelection().getRangeAt(0);
} else if(document.selection) { 
   window.savedRange = document.selection.createRange();
} 

そして、キャレットの位置を戻そうとします

$('#form').get(0).focus();
if (window.savedRange != null) {
    if (window.getSelection) {

        var s = window.getSelection();

        if (s.rangeCount > 0) 
            s.removeAllRanges();

        s.addRange(window.savedRange);
    } else if (document.createRange) {
        window.getSelection().addRange(window.savedRange);
    } else if (document.selection) {
        window.savedRange.select();
    }
}

ユーザーが入力している間にこれがすべて発生するため、キャレットを保持する必要があります。上記のコードは何もしませんでした。それでもdivの先頭に戻ります。