Javascript 在光标位置的可编辑div中插入多个元素

我有一个具有contenteditable属性的div。用户需要能够在光标所在的位置键入和插入多个选择菜单。我成功地获得了光标位置并插入了第一个选择菜单，但它只在第一个文本节点上起作用

这就是我获取光标位置的方式：

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
            sel = win.getSelection();
            if (sel.rangeCount > 0) {
                    var range = win.getSelection().getRangeAt(0);
                    var preCaretRange = range.cloneRange();
                    preCaretRange.selectNodeContents(element);
                    preCaretRange.setEnd(range.endContainer, range.endOffset);
                    caretOffset = preCaretRange.toString().length;
                }
            } else if ( (sel = doc.selection) && sel.type != "Control") {
              var textRange = sel.createRange();
              var preCaretTextRange = doc.body.createTextRange();
              preCaretTextRange.moveToElementText(element);
              preCaretTextRange.setEndPoint("EndToEnd", textRange);
              caretOffset = preCaretTextRange.text.length;
          }
          return caretOffset;
    }

然后，每当用户键入或单击时，我都会更新它

function updatePos() {
    var el = document.getElementById("msg");   
    pos = getCaretCharacterOffsetWithin(el);
}
document.body.onkeyup = updatePos;
document.body.onmouseup = updatePos;

下面是我如何处理添加选择的按钮。我不知道如何在文本节点后插入元素，所以我插入了一个br标记，然后将其删除。必须有更干净的方法，对吗

$('#btn').click(function(){
        var selectList = document.createElement('select');
        var msg = $('#msg');
        $(msg).html(function(){
                var first = $(msg).html().substring(0, pos);
                var last =  $(msg).html().substring(pos);
                return first + '<br>' + last;
        });

        $(msg).contents().filter('br').after(selectList);

        $(msg).contents().filter('br').remove();

        $(msg).focus();
})

$（'#btn'）。单击（函数（）{
var selectList=document.createElement（'select'）；
var msg=$（“#msg”）；
$（msg）.html（函数（）{
var first=$（msg.html（）.substring（0，pos）；
var last=$（msg.html（）.substring（pos）；
返回第一个+'
'+最后一个；
});
$（msg）.contents（）.filter（'br'）。在（selectList）之后；
$（msg）.contents（）.filter（'br'）.remove（）；
$（msg.focus（）；
})

我想问题是我正在使用子字符串分割文本，并且能够在那里插入select，一旦有另一个select标记，子字符串就不能通过第一个文本节点。所以也许我应该用不同的方法重做这件事，但我完全被卡住了

以下是JSFIDLE：

---

谢谢

问题是，对于HTML元素，就jQuery而言，

text（）

，而不是

HTML（）

我想有一个更好的解决方案，有一些范围参数，但有一些：

    //fix caret pos
    var temlOffset = pos;
    $('#msg').html().split(/(<[^>]+>)/g).forEach(function(el){
        if(temlOffset > 0){
            if(el.length && el[0] === '<'){
               pos += el.length;
            } else {
               temlOffset -= el.length;
            }
        }
    });

//固定插入符号位置
var temlOffset=位置；
$（'#msg'）.html（）.split（/（]+>）/g.forEach（函数（el）{
如果（temlOffset>0）{
如果（el.length&&el[0]='