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

Question

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

看看下面的图片。

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

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

如果脚本会插入一个红色背景颜色的元素，结果必须如下图所示。

老实说，我不知道从哪里开始，我发现一些WYSIWYG编辑器使用脚本在carret位置插入一些东西，但这是光标位置，在2行之间或在一行的末尾。我非常感谢你的帮助。

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>");
});