I tried to create a range, which leads to a specific point in the text, but this was very difficult with the ChildNodes, because you can't reach exactly one point in the text, but only for example the beginning or end of a ChildNode.
I there a way to reach the point between „te“ and „st“ (like putting the cursor between „te|st“) or is it possible to create a range independent of the childnodes?
Here is my Code:
function myFunction(el) {
var textNode = el.childNodes[1];
var range = document.createRange();
range.selectNodeContents(el);
range.setStart(textNode, 0);
range.setEnd(textNode, 0);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}<!DOCTYPE html>
<html>
<body>
<div id="myText" contenteditable>test<br>test</div>
<button type="button" onclick='myFunction(document.getElementById("myText"))'>Go into Text</button>
</body>
</html>