jQuery after()和insertAfter()方法

jQuery after()方法

在 jQuery 中，我们可以使用 after( ) 方法向所选元素外部的 后面 插入内容。

语法：

$(A).after(B)

$(A).after(B) 表示往 A 外部的后面插入 B。

举例

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 style type= text/css 

 p{background-color:orange;}

 /style 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( #btn ).click(function () {

 var $strong = strong jQuery教程 /strong 

 $( p ).after($strong);

 /script 

 /head 

 body 

 p C语言中文网 /p 

 input id= btn type= button value= 插入 / 

 /body 

 /html 

程序执行结果如图 1 所示。

图 1：默认效果

我们点击【插入】按钮后，此时预览效果如图 2 所示。

图 2：点击按钮后的效果

我们点击【插入】按钮之后，此时得到的 HTML 结构如下。

 p C语言中文网 /p strong jQuery教程 /strong 

jQuery insertAfter()方法

在 jQuery 中，insertAfter( ) 和 after( ) 这两个方法功能虽然相似，都是向所选元素外部的 后面 插入内容，但是两者的操作对象是颠倒的。

语法：

$(A).insertAfter(B)

$(A).insertAfter(B) 表示将 A 插入到 B 外部的后面。

举例：

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 style type= text/css 

 p{background-color:orange;}

 /style 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( #btn ).click(function () {

 var $strong = strong jQuery教程 /strong 

 $($strong).insertAfter( p 

 /script 

 /head 

 body 

 p C语言中文网 /p 

 input id= btn type= button value= 插入 / 

 /body 

 /html 

默认情况下，预览效果如图 3 所示。

图 3：默认效果

我们点击【插入】按钮后，此时预览效果如图 4 所示。

图 4：点击按钮后的效果

在下面代码中，这两种插入节点的方式是等价的。

//方式1

var $strong = strong jQuery入门教程 /strong 

$( p ).after($strong);

//方式2

var $strong = strong jQuery入门教程 /strong 

$($strong).insertAfter( p 

最后，我们总结一下 jQuery 中用于插入节点的方法，共有以下 4 组。

对于这 4 组方法，我们可以这样划分：第 1 组和第 2 组是 内部插入节点 方法，第 3 组和第 4 组是 外部插入节点 方法。上面每一组中，两种方法都是等价的。因此为了减轻记忆负担，我们只需要记住以下任何一类就可以了。

第1类：prepend()、append()、before()、after()。

第2类：prependTo()、appendTo()、insertBefore()、insertAfter()。

建议大家记忆上面的第二类，原因是第二类的语义很直接，都是把内容插入到 （to） 元素中去。

23892.html

CSSC语言htmljavaJavaScript