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

Question

我正在尝试创建一个脚本，当在包含文本的元素内单击时插入一个元素。

看看下面的图片。

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

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

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

老实说，我不知道从哪里开始，我发现一些所见即所得的编辑器使用脚本在 carret 位置插入一些东西，但这是光标位置和两行之间或行尾。我真的很感谢你的帮助。

http://cdpn.io/nocfe

Answer 1

假设您的标记是这样的：

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

您可以使用$.after()插入新元素

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