在替换contenteditable元素中的文本时如何将插入符号保留在当前位置

Question

我有<span contenteditable="true">。当我移动到列表或表格之后的新行时，我得到了

<div><br></div>

所以要获得新段落，我使用

替换div

myContentEditableElement.addEventListener('keyup', function(){
    if(this.innerHTML.indexOf('<div><br></div>') != -1) {
        this.innerHTML = this.innerHTML.replace(/<div><br><\/div>/g,'<p><br></p>');
    }
});

现在，插入符号移动到我的可满足元素的开头。但我需要它离开现在的位置，即新段落内部。

我试过

var range = document.createRange();
range.selectNodeContents(this);
var selection = window.getSelection();
range.setStart(selection.anchorNode, selection.anchorOffset);
selection.removeAllRanges();
selection.addRange(range);

但它无济于事

Answer 1

我自己找到了答案：

if(~this.innerHTML.indexOf('<div><br></div>')) {
    var newLine = document.createElement('p');
    newLine.innerHTML = '<br>';
    var selection = window.getSelection();
    var newDivNode = selection.anchorNode;
    this.insertBefore(newLine, newDivNode);
    this.removeChild(newDivNode);
    var range = document.createRange();
    range.setStart(newLine, 0);
    range.setStart(newLine, 0);
    selection.removeAllRanges();
    selection.addRange(range);
}