如何将新输入的文本包装到以下已经存在的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>