在JavaScript中,插入节点只有appendChild()和insertBefore()两种方法。不过在jQuery中,却为我们提供大量有关插入节点的方法,极大地方便了我们的操作。

在jQuery中,插入节点的方法有以下4组。

  • (1)prepend()和prependTo()
  • (2)append()和appendTo()
  • (3)before()和insertBefore()
  • (4)after()和insertAfter()

一、prepend()和prependTo()

1.prepend()

在jQuery中,我们可以使用prepend()方法向所选元素内部的“开始处”插入内容。

语法:

$(A).prepend(B)

说明:

$(A).prepend(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").prepend($strong); }) }) </script> </head> <body> <p>绿叶学习网</p> <input id="btn" type="button" value="插入"/> </body> </html>

默认情况下,浏览器预览效果如下图所示。

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

分析:

在这个例子中,我们为p元素添加背景色,这样可以很直观地看出新节点是插入p元素的内部还是外部。

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

<p><strong>jQuery教程</strong>绿叶学习网</p>

2.prependTo()

在jQuery中,prependTo()和prepend()这两个方法功能相似,都是向所选元素内部的“开始处”插入内容。但是两者的操作对象却是颠倒的。

语法:

$(A).prependTo(B)

说明:

$(A).prependTo(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).prependTo("p"); }) }) </script> </head> <body> <p>绿叶学习网</p> <input id="btn" type="button" value="插入"/> </body> </html>

默认情况下,浏览器预览效果如下图所示。

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

分析:

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

//方式1 var $strong = "<strong>jQuery入门教程</strong>"; $("p").prepend($strong); //方式2 var $strong = "<strong>jQuery入门教程</strong>"; $($strong).prependTo("p");

prepend()和prependTo()功能相似,操作却相反,不少新手很容易搞混。不过我们仔细琢磨一下“to”的英文含义,就很容易区分了。prepend()表示往元素插入内容,而prependTo()表示将内容插入“到(to)”元素中去。

二、append()和appendTo()

1.append()

在jQuery中,我们可以使用append()方法向所选元素内部的“末尾处”插入内容。

语法:

$(A).append(B)

说明:

$(A).append(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").append($strong); }) }) </script> </head> <body> <p>绿叶学习网</p> <input id="btn" type="button" value="插入"/> </body> </html>

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

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

分析:

当我们点击【插入】按钮后,此时得到的HTML结构如下:

<p>绿叶学习网<strong>jQuery教程</strong></p>

2.appendTo()

在jQuery中,appendTo()和append()这两个方法功能相似,都是向所选元素内部的“末尾处”插入内容。但是两者的操作对象却是颠倒的。

语法:

$(A).appendTo(B)

说明:

$(A).appendTo(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).appendTo("p"); }) }) </script> </head> <body> <p>绿叶学习网</p> <input id="btn" type="button" value="插入"/> </body> </html>

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

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

分析:

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

//方式1 var $strong = "<strong>jQuery入门教程</strong>"; $("p").append($strong); //方式2 var $strong = "<strong>jQuery入门教程</strong>"; $($strong).appendTo("p");

三、before()和insetBefore()

1.before()

在jQuery中,我们可以使用before()方法向所选元素外部的“前面”插入内容。

语法:

$(A).before(B)

说明:

$(A).before(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").before($strong); }) }) </script> </head> <body> <p>绿叶学习网</p> <input id="btn" type="button" value="插入"/> </body> </html>

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

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

分析:

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

<strong>jQuery教程</strong><p>绿叶学习网</p>

2.insertBefore()

在jQuery中,insertBefore()和before()这两个方法功能相似,都是向所选元素外部的“前面”插入内容。但是两者的操作对象却是颠倒的。

语法:

$(A).insertBefore(B)

说明:

$(A).insertBefore(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).insertBefore("p"); }) }) </script> </head> <body> <p>绿叶学习网</p> <input id="btn" type="button" value="插入"/> </body> </html>

默认情况下,浏览器预览效果如下图所示。

当我们点击【插入】按钮后,预览效果如下图所示。

分析:

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

//方式1 var $strong = "<strong>jQuery入门教程</strong>"; $("p").before($strong); //方式2 var $strong = "<strong>jQuery入门教程</strong>"; $($strong).insertBefore("p");

四、after()和insetAfter()

1.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>绿叶学习网</p> <input id="btn" type="button" value="插入"/> </body> </html>

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

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

分析:

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

<p>绿叶学习网</p><strong>jQuery教程</strong>

2.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>绿叶学习网</p> <input id="btn" type="button" value="插入"/> </body> </html>

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

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

分析:

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

//方式1 var $strong = "<strong>jQuery入门教程</strong>"; $("p").after($strong); //方式2 var $strong = "<strong>jQuery入门教程</strong>"; $($strong).insertAfter("p");

最后,我们总结一下jQuery插入节点方法,共有以下4组。

  • (1)prepend()和prependTo()
  • (2)append()和appendTo()
  • (3)before()和insertBefore()
  • (4)after()和insertAfter()

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

  • (1)第1类:prepend()、append()、before()、after()
  • (2)第2类:prependTo()、appendTo()、insertBefore()、insertAfter()

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