如何將新輸入的文本包裝到以下已經存在的span標簽中

Question

如果用戶在 contenteditable div 中的 wordx 之前放一些東西，例如 somthingwordx，因為新添加的文本“soemthing”沒有自動包裝到任何現有的跨度中，我怎么知道用戶將文本添加到哪個跨度並使用 javascript 將其包裝到該跨度中？

演示：

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