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