JavaScript的：插入在鍵盤插入符號圖像元素旁邊現有的圖像元素

Question

使用下面的XHTML代碼...

<div contenteditable="true"> 
<img alt="" src="1.png" /> 
</div> 

...如果用戶有鍵盤插入符號只圖像元素後（無論是anchorNode或focusNode）我想使用一個W3C標準方法，例如appendChild或insertBefore插入一個新的圖像元素。

我已嘗試以下步驟來確定DOM的位置...

alert(
'focusNode = '+window.getSelection().focusNode 
+'\n\npreviousSibling = '+window.getSelection().focusNode.previousSibling 
+'\n\nnextSibling = '+window.getSelection().focusNode.nextSibling 
+'\n\nparentNode = '+window.getSelection().focusNode.parentNode); 

try 
{ 
alert(
'focusNode = '+window.getSelection().focusNode 
+'\n\n.previousSibling.previousSibling = '+window.getSelection().focusNode.previousSibling.previousSibling 
+'\n\n.nextSibling.nextSibling = '+window.getSelection().focusNode.nextSibling.nextSibling 
+'\n\nparentNode = '+window.getSelection().focusNode.parentNode); 
} catch (err) {} 

alert(
'anchorNode = '+window.getSelection().anchorNode 
+'\n\npreviousSibling = '+window.getSelection().anchorNode.previousSibling 
+'\n\nnextSibling = '+window.getSelection().anchorNode.nextSibling 
+'\n\nparentNode = '+window.getSelection().anchorNode.parentNode); 

try 
{ 
alert(
'anchorNode = '+window.getSelection().anchorNode 
+'\n\n.previousSibling.previousSibling = '+window.getSelection().anchorNode.previousSibling.previousSibling 
+'\n\n.nextSibling.nextSibling = '+window.getSelection().anchorNode.nextSibling.nextSibling 
+'\n\nparentNode = '+window.getSelection().anchorNode.parentNode); 
} catch (err) {} 

我也試着這樣簡單地告訴我，有多少空白字符（特徵線）有...

alert(window.getSelection().anchorOffset+'\n\n'+window.getSelection().focusOffset); 

我一直無法確定如何直接在鍵盤插入符號旁找到圖像。

---

我的目標是要做到這一點使用W3C的方法和屬性只左右....

1）沒有使用專有的微軟內部---什麼方法。

2）沒有使用框架，不僅僅是因爲它們使用內部---任何方法。我試圖確定一個圖像元素是否恰好位於插入符號旁邊，如果是文本，那麼這是一個不同的條件（只要提到{alert（'in或next next to text'）;}）;}）;}） 。

Answer 1

var img = document.createElement('img'); 
img.setAttribute('alt','alternative text'); 
img.setAttribute('src','2.png'); 
window.getSelection().getRangeAt(0).insertNode(img);