javascript，jquery在文本内单击时插入元素

我试图创建一个脚本，在包含文本的元素中单击时插入一个元素

请看下面的图片

A和B是最终用户的鼠标点击位置

因此，如果用户要单击点A，脚本必须在发生单击的行之间插入一个元素

如果脚本将插入一个具有红色背景色的元素，则结果必须与下图所示类似

我真的不知道从哪里开始，我发现一些WYSIWYG编辑器使用脚本在carret位置插入内容，但这是光标位置，在两行之间或一行的末尾。我真的很感谢你的帮助

---

假设您的标记是这样的：

<div class="text">
    <p>Thomas is rich...</p>
    <p>in the past...</p>
</div>

托马斯很富有

过去

可以使用插入新元素

$(".text p").click(function()
{
    $(this).after("<p>I'm the new element</p>");
});

$（“.text p”）。单击（函数（）
{
$（这个）。在（“我是新元素”
”）之后；
$(".text p").click(function()
{
    $(this).after("<p>I'm the new element</p>");
});

});

你能提供至少一些HTML供我们使用吗？@Mattytomo我在问题中添加了codepen文档，以后会考虑这个问题。我可能错了，但你几乎可以肯定，为了实现这一点，你必须为每一行将元素分成单独的

p

标记。不是每一行都是新的段落，这个indead可以解决问题，但事实并非如此。另一个选项是用类将span中的每一行包装起来，并用类选择器替换p选择器。