子ノードのcontenteditable set carret

Question

<i>タグがcontenteditableの中に入った後に、カレットを設定しようとするときにいくつか問題があります。ここで

は私が持っているものです。

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

私は後carretを置くにはどうすればよい..さんは、ここに第三<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>タグの位置を動作させる方法がわかりません。 p 5子ノードで

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>

あなたが本当に子ノードの使用でrange.setStart(el.childNodes[3], 0);