Javascript 在DOM#id处设置活动插入符号（在指定的div之后、之前）

我需要在contenteditable div中用#id设置DOM元素后面的插入符号位置。这样我就可以继续键入文本

一般的问题是

获取指定DOM元素的插入符号位置（即带有#id的span或div）

将插入符号设置在此位置（即，在此DOM元素之后+由于焦点而能够写入文本）

---

html结构示例：

<div id="container" contenteditable="true">
    dasidjsaid<div id="el1">sdsad</div>fdfhsdhdsf<div id="el2">sdsad</div>afasf
    <div id="el3">test</div><div id="el4">jsj</div> <div id="el5">32</div>sadsa
</div>

DASIDJSAIDSDSADFDFHDSDSFSDSADAFASF
testjsj 32sadsa

尝试一下：

函数setToStart（元素）{
if（！元素）{
返回；
}
元素focus（）；
var range=document.createRange（）；
range.setStart（元素，0）；
range.setEnd（元素，0）；
范围。塌陷（真）；
var sel=window.getSelection（）；
选择removeAllRanges（）；
试一试{
选择添加范围（范围）；
}捕获（e）{}
}
函数setToEnd（元素）{
元素focus（）；
变量nodeStack=[元素]；
var节点=null；
var lastNode=元素；
var charIndex=0；
而（（node=nodeStack.pop（））{
if（node.nodeType==3）{
lastNode=节点；
charIndex=node.length；
}否则{
var i=node.childNodes.length；
而(我--){
nodeStack.push（node.childNodes[i]）；
}
}
}
var range=document.createRange（）；
range.setStart（lastNode，charIndex）；
range.setEnd（lastNode，charIndex）；
范围。塌陷（真）；
var sel=window.getSelection（）；
选择removeAllRanges（）；
试一试{
选择添加范围（范围）；
}捕获（e）{}
}
document.getElementById（'setStart'）。addEventListener（'click'，function（）{
setToStart（document.getElementById（'first'））；
});
document.getElementById（'setEnd'）。addEventListener（'click'，function（）{
setToEnd（document.getElementById（'first'））；
});
Title
前庭id猫门舌euismod semper。勃朗迪特港提托策拉比图尔酒店。奥迪奥先生，他是一位杰出的自由主义者，他是奥古斯都的法学家。这是一个非常重要的问题
设置为第一段的开头
设置为第一段末尾
是否要将插入符号移动到div的末尾（因此插入符号在sdsad和@firefoxuser_1之间），而不是在具有特定id的div之后或之前。例如在#el3:
…testCARET…
@ziom之后，这在Safari/Chrome中是有效的-我会看看是否能解决Firefox的问题。