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

我试图创建一个脚本，插入元素时单击包含文本的元素内。javascript，jquery插入元素时单击文本

看看下面的图片。

example

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

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

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

result

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

你至少可以提供一些你的HTML我们跟...共事？ – mattytommo 2013-02-28 21:04:07

@mattytommo我在我的问题中添加了codepen doc，将来会考虑这一点。 – onlineracoon 2013-02-28 21:10:27

我可能是错的，但是你几乎可以肯定必须将你的元素分成每个行的单独'p'标签才能实现。 – mattytommo 2013-02-28 21:23:04

假设您的标记是这样的：

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

2013-02-28 21:08:58 mgoeppner

不是每一行都是新的段落，这个indead会解决问题，但事实并非如此。 – onlineracoon 2013-02-28 21:11:13

另一种选择是将每个单独的行用一个类包装在一个范围中，并用类选择器替换p选择器。 – mgoeppner 2013-02-28 21:13:19

回答