DOM外部插入after()与before()

 

（作者：老薛，撰写时间：2019年6月23日）

首先我们看一个属性after(content|fn)，after(content|fn)意思是在每个匹配的元素之后插入内容。它的参数说明是：content 插入到每个目标后的内容 function 函数必须返回一个html字符串。下一个我要讲的属性是：before(content|fn)。而它的意思是：before(content|fn):在每个匹配的元素之前插入内容。还有它的参数说明：content 插入到每个目标后的内容 function 函数必须返回一个html字符串。

接下来我们就讲解与它相关的是按钮的点击事件，我们先看一简单张截图：

                                     图1

我们也看到这是一张简单的点击按钮事件，点击通过JQuery的insertAfter添加元素。

而接下来的这张图是与DOM外部插入after()与before()相关的的点击事件，请看下面这长截图：

                                             图2

而接下来说的属性是：DOM外部插入insertAfter()与insertBefore()。所以我会一一解说。

我们先看insertAfter(content)；这个insertAfter(content)属性意思是：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

而实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。这个参数也说明：content 用于匹配元素的jQuery表达式。

这也就是下面的这张图片：

                                      图3

而我这个.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。

我们还要说到一个属性：insertBefore(content)意思是：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

它实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。参数说明：content 用于匹配元素的jQuery表达式。