本文共 2975 字，大约阅读时间需要 9 分钟。
插入节点 将新创建的节点插入到某个文档的方法并非只有常见的append()， 在jQuery中还提供了其他几种插入节点的方法， 如表 一、append( ) 、appendTo( ) -- 在元素内部的后面追加
| append() | 向匹配的元素内部的后面追加内容 | $(A).append(B) 将B追加到匹配的A中 |
| appendTo() | 将元素追加到指定的元素中的后面 与append()正好颠倒 即不是将B追加到A中 而是将A追加到B中 | $(A).appendTo(B) 将A追加到B中 |
假设<body>标签中有如下代码：
我想说：Hello...
如果希望在<p>标签内的文字变成 “我想说：Hello...Hi!”。并且 “Hi!” 两个字母加粗。
则代码应该写成
如果用 append() 和 appenTo() 实现我想说：Hello...Hi!
1. append()方法：
注意此例子中<script></script>标签应该写在 <body>中要操作的标签的下面。 最好直接写在 <body></body>内部的最下面。 因为该js代码实现的前提是需要在标签加载完毕的时候。 如果写在<head>标签内。页面运行时还没有加载出<body>中的<p>标签。所以js代码块不起作用。无标题文档 我想说：Hello...
参考：
此时就等于了
运行图：我想说：Hello...Hi!
2. appendTo()方法：
如果直接将上边 <script></script>代码内的 “ $("p").append("<b>Hi!</b>"); ” 改成 “ $("p").appendTo("<b>Hi!</b>"); ” 则运行页面时发现页面空白。因为 appendTo()方法是将前边的内容追加到后面的内容中。 而HTML文档中并没有"<b>Hi!</b>"这行内容。所以无从追加。 如果将“ $("p").appendTo("<b>Hi!</b>"); ”中 appendTo 前后括号调换位置。再运行页面，运行结果同上。也就是说 如果希望 页面<body>中HTML结构由
<p>我想说：<i>Hello...</i></p>
变为
<p>我想说：<i>Hello...</i><b>Hi!</b></p>
那么以下两种方式都是正确的，但区别是前后内容括号颠倒位置
$("p").appendTo("Hi!"); //1.在标签里追加"Hi!" $("Hi!").appendTo("p"); //2.将"Hi!"追加到
标签
二、prepend( ) 、 prependTo( )--在元素内部的前面追加
| prepend() | 向匹配的元素内部前置内容 | $(A).prepend(B) 将B前置到匹配的A中 |
| prependTo() | 将元素前置到指定的元素中 与prepend()正好颠倒 即不是将B前置到A中 而是将A前置到B中 | $(A).prependTo(B) 将A前置到B中 |
若在<script></script>代码块中用 prepend()
$("p").prepend("Hi!"); 运行后： 
可以看出prepend()方法将 "<b>Hello</b>" 追加到<p>标签内部的前边。也就是说位于<p></p>标签内部的最前方 因此pretend()方法和attend()方法虽然都是在元素内部追加指定内容，但是前者在内部的前面追加。后者在内部的后面追加。 若上述在<script></script>代码块中用 prependTo(),同上面appendTo一样。页面空白。 而调换前后括号换位置时候运行同上。 也就是说 如果希望 页面<body>中HTML结构由，
<p>我想说：<i>Hello...</i></p> 变为 <b>Hi!</b>我想说：<i>Hello...</i></p>
那么以下两种方式都是正确的，但区别是前后内容括号颠倒位置
$("p").prepend("Hi!");//1.在标签内部的前边追加"Hello" $("Hi!").prependTo("p");//2.将"Hello"追加到
标签内部的前边
三、before( ) 、insertBefore( ) --在元素外部之前加入内容
| before() | 在匹配的元素之前插入内容 | $(A).before(B) 将B插入到匹配的A前面 |
| insertBefore() | 将元素插入到指定的元素的前面 与before()正好颠倒 即不是将B插入到A前面 而是将A插入到B前面 | $(A).insertBefore(B) 将A插入到B前面 |
同样假设<body>标签内部有 “ <p>我想说：<i>Hello...</i></p> ”代码行 js中写入以下代码：
$("p").before("Hi!"); 运行结果： 
或者说换成insertBefore()方法运行以下代码：
$("Hi!").insertBefore("p"); 运行结果同上。总结的说。以上两种方法都能实现将HTML结构由 <p>我想说：<i>Hello...</i></p> 变为 <b>Hi!</b><p>我想说：<i>Hello...</i></p>
四、after( ) 、insertAfter( ) --在元素外部之后加入内容
| after() | 向匹配的元素之后插入内容 | $(A).append(B) 将B插入到匹配的A后面 |
| insertAfter() | 将元素插入到指定的元素后面 与after()正好颠倒 即不是将B插入到A后面 而是将A插入到B后面 | $(A).appendTo(B) 将A插入到B后面 |
同样假设<body>标签内部有“ <p>我想说：<i>Hello...</i></p> ”代码行
js中写入以下代码：
$("p").after("Hi!"); 运行结果图： 
同样换成insertAfter()方法运行以下代码： $("Hi!").insertAfter("p"); 运行结果同上。 总结的说，如果希望实现将HTML结构由 <p>我想说：<i>Hello...</i></p> 变成<p>我想说：<i>Hello...</i></p><b>Hi!</b>
after()和insertAfter()两种方法都可以。但是要注意前后括号的位置关系。
所以before() 和insertBefore()、after和insertAfter()方法是往指定元素的外部插入新的节点。 不同的是 before()和insertBefore()是在元素之前添加新内容。即元素的外部的前边。 而after和insertAfter()方法是在元素之后添加新内容。即元素的外部的后边。
attend() 和attendTo()、prepend和prependTo()方法是往指定元素的内部插入新的节点。 不同的是prepend和prependTo()方法是在元素中的前边添加新内容。即元素的内部的前边。 而attend() 和attendTo()是在元素中的后边添加新内容。即元素的内部的后边。