根据我点击javascript/JQuery的位置更改HTML

Question

在html页面中,您可能会有一些代码包含两个段落,如下所示:

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

而且非常简单,这两个标签将呈现如下:

第一段

第二段

我感兴趣的是允许用户单击渲染的html代码中的某个位置,以便使用JQuery插入新元素.例如,如果我在第一段中找到的单词f*ir*st中单击字母i和字母r(只是单击,没有高亮/选择),我就可以插入自定义跨度元素或任何我就像在HTML代码中的那个位置那样导致这样的事情:

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

有什么想法可以帮助我吗？我的要求不包括绝对定位.这不会解决我的问题.

Answer 1

这可以通过稍微复杂的脚本来完成。

我可以说出一个你可以尝试的算法。

1.JQuery有一个API offset() http://api.jquery.com/offset/使用它你可以获取偏移量和元素。

2.现在您需要获取元素的innerHTML，将其作为字符串，从偏移量Y val开始，在字符串中的位置Y处分割。使元素成为两个元素。

3.现在您可以使用 creteElement(tagname) 直接在脚本中创建一个元素并设置innerHTML，然后将其插入两个元素之间