Contenteditable設置在一個孩子節點上的毯子

Question

我在嘗試設置<i>標記contenteditable內的標記後有一些困難。

以下是我有：

<p contenteditable="true"><i>H</i><i>e</i><i>l</i><i>l</i><i>o</i></p> 

如何把CARRET後..讓我們說3 <i>標籤在這裏？

我已經嘗試過這樣的解決方案：

var el = document.getElementsByTagName('p')[0]; 
var range = document.createRange(); 
var sel = window.getSelection(); 
range.setStart(el.childNodes[0], 3); 
range.collapse(true); 
sel.removeAllRanges(); 
sel.addRange(range); 
el.focus(); 

但我不知道如何使它與<i>標籤，而不是字符的位置工作。

Answer 1

var el = document.getElementsByTagName('p')[0]; 
 
var range = document.createRange(); 
 
var sel = window.getSelection(); 
 
range.setStart(el.childNodes[3], 0); 
 
range.collapse(true); 
 
sel.removeAllRanges(); 
 
sel.addRange(range); 
 
el.focus();

<p contenteditable="true"><i>H</i><i>e</i><i>l</i><i>l</i><i>o</i></p>

在p 5子節點都在那裏，如果你想在子節點使用設置插入符range.setStart(el.childNodes[3], 0);