Javascript：如何知道用户在contenteditable div中向哪个跨度添加了文本？

如果用户在contenteditable div中的wordx之前放置了一些内容，例如somthingwordx，因为新添加的文本没有包装到任何现有的span中，我如何知道用户将文本添加到哪个span中

演示

单词1单词2
单词3单词4单词5单词6单词7单词8单词9单词10单词11单词12

使用

DOMCharacterDataModified

事件

var div=document.getElementById（“inputbox”）；
div.addEventListener（“DOMCharacterDataModified”，函数（e）{
var elem=e.target.parentNode；
控制台日志（elem）；
}，假）

单词1单词2
单词3单词4单词5单词6单词7单词8单词9单词10单词11单词12
jsfiddle添加到目前为止您所做的工作。。
<div id="inputbox" style="border:1px solid lightgrey" contenteditable="true">
  <span id="1">word1</span>  <span id="2">word2</span>
  <span id="3">word3</span>  <span id="4">word4</span>  <span id="5">word5</span>  <span id="6">word6</span>  <span id="7">word7</span>  <span id="8">word8</span>  <span id="9">word9</span>  <span id="10">word10</span>  <span id="11">word11</span>  <span id="12">word12</span>
</div>