Javascript 如何将新输入的文本包装到以下已存在的span标记中

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

演示：

---

现在，我已经为您更新了代码，并为您提供了一个有效的解决方案。在这里查看片段或小提琴：

希望这会有帮助

$document.readyfunction{ $'span'。在'DOMSubtreedModified'函数上{ $'result>p'。文本$this.attr'id'； }; }; 字1 字2 字3 字4 字5 字6 字7 字8 字9 字10 字11 字12 这是已更改的跨度：

---

你的问题不清楚你需要什么。你能用你尝试过的东西制作一个有效的演示吗？兄弟，我认为如果你能展示你尝试过的东西，而不是仅仅告诉每个人你的问题，那将是非常棒的。你可能会得到更好的帮助。谢谢，我只有一点线索，正在研究它。不要在文章中使用html标记，而不在开头用四个空格的代码发布它们，或者用反勾号包装它们。否则，它不会显示在帖子中。只是HTML标记的一个限制。@MohammadAnini:以后，请不要修改问题中的代码，如果没有首先与OP确认打字错误是否仅在他们的问题上，或者实际上也在他们的代码中。你修正的打字错误很可能是这个问题存在的全部原因。谢谢，但实际上我的困难是如何检测用户在哪里添加文本。如果用户添加文本beofre word 7、8或9等，我如何使用javascript检测它是哪个跨度？@zoyb我已经编辑了我的代码，因此尝试在文本框中写入一些内容，您会发现word 7将发生更改，并且在下面看到受bin影响的开关跨度。@如果您将一些文本放在单词之前，无法检测它影响了哪个跨度。知道怎么破解吗？例如，在word8之前键入a，获取aword8，DOMSubtreeModified无法检测它会影响到哪一个。您能向我解释一下您/用户是如何更改跨度的吗？我希望不要通过HTML文件，因为没有机会检测到编辑。我现在已经为您更新了代码。查看片段或小提琴：

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