] Изменение HTML в зависимости от того, где я нажимаю, с помощью javascript / JQuery [

] На html-странице у вас может быть код с двумя абзацами вроде этого: [

<hr />
<p>The first paragraph</p>
<p>The second paragraph</p>
<hr />

] и очень просто, эти два тега будут отображаться так: [

] Первый абзац [

] Второй абзац [

] Что меня интересует, так это позволить пользователю щелкнуть где-нибудь в визуализированном html-коде, чтобы вставить новый элемент с помощью JQuery. Например, если я щелкну между буквой i и буквой r (просто щелчок, без выделения / выделения) в слове f * [] ir [] * st, найденном в первом абзаце, я смогу вставить настраиваемый элемент span или что-то еще, что мне нравится, именно в этой позиции в HTML-коде, в результате получается что-то вроде этого: [

<hr />
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p>
<p>The second paragraph</p>
<hr />

] Есть идеи, которые могут мне помочь? Мой запрос исключает абсолютное позиционирование. Это не решило бы моих проблем. [