Javascript：どのスパンがcontenteditable divにテキストを追加したかを知るには？

Question

ユーザーがcontentdit divにwordxの前に何かを入れると、新たに追加されたテキストが既存のスパンにラップされていないので、ユーザーがテキストをどのスパンに追加したかをどのように知ることができますか？

デモ

<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> 

Answer 1

DOMCharacterDataModifiedイベントを使用してください。

var div = document.getElementById("inputbox"); 
 
div.addEventListener("DOMCharacterDataModified", function(e) { 
 
    var elem = e.target.parentNode; 
 
    console.log(elem); 
 
}, false);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 
<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>