javascript - 選択を復元/保存するときの contenteditable div の問題

Question

編集可能なdiv ( #recommendTextArea) があり、ユーザーがリストをクリックしたときにこの div の innerHTML を変更しようとすると (これは と呼ばれます.display_box)、関数は次のようになります。基本的に、div の innerHTML にスパンを追加してから を非表示にします。非表示にするときに、呼び出した余分なスパンを追加friendListしようとします。restoreTheSelectionsaveSelection

$(".display_box").live("click",function() 
    {
        selRange = saveSelection();
        console.log(selRange);
        var username = $(this).attr('title');
        var old = $("#recommendTextArea").html();
        var content = old.replace(word, " "); //replacing @abc to (" ") space
        var E ="<span contenteditable='false'>"+ username + "</span> ";
        content = [content.slice(0, start), E, content.slice(start)].join('');
        $("#recommendTextArea").html(content);
        $("#friendsList").hide(function(){
            restoreSelection(selRange);
        });
    });

選択を復元して保存する次の機能があります。

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

ただし、これは期待どおりに機能しません。アイテムをクリックしてもカーソルが表示されません。ここで何が間違っていますか？