javascript，jquery插入元素時單擊文本

Question

我試圖創建一個腳本，插入元素時單擊包含文本的元素內。

看看下面的圖片。

的A和B是最終用戶的鼠標點擊的位置。

所以如果用戶點擊點A，腳本必須在點擊發生的行之間插入一個元素。

如果腳本插入帶有紅色背景色的元素，結果必須如下圖所示。

老實說，我不知道從哪裏開始，我發現，使用腳本插入在CARRET位置的東西有些WYSIWYG編輯器，但這是光標位置，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>"); 
});