次の既存のスパンタグに新しく入力されたテキストをラップする方法

Question

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

デモ：

<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

私は今働いているあなたのためのソリューションを使用してコードを更新しました。スニペットやフィドルをここでチェックしてください：https://jsfiddle.net/4xcxLt34/2/

希望すると助かります！

$(document).ready(function(){ 
 
    $('span').on('DOMSubtreeModified', function() { 
 
    $('#result > p').text($(this).attr('id')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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> 
 
<div id='result'> 
 
    <h3> 
 
    This is the span that is changed: 
 
    </h3> 
 
    <p> 
 

 
    </p> 
 
</div>