一、首先構建一個簡單布局，來供下邊講解使用
1、HTML部分代碼：
<div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> </div> <div id="div3">div3 <b id="b1">b1</b> <b id="b2">b2</b> </div>
2、JS部分代碼：（先把剛才在html中寫的幾個標簽都獲取到，此處只在原生JS中用，在JQuery中默認被刪除）
var oDiv2 = document.getElementById('div2');
var oSpan2 = document.getElementById('span2');
var oB2 = document.getElementById('b2');
3、圖示：
二、原生JS種添加節點一共有2種方法
1、appendChild()
(1)、概念：把要添加的節點添加到指定父級里面的最后面，所以也叫追加
(2)、使用方式：父級節點.appendChild( 要添加的節點 )
(3)、JS代碼：
document.onclick = function(){ oDiv2.appendChild(oB2);//將b2追加到div2里面的最后面 }
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法
2、insertBefore()
(1)、概念：把要插入的節點添加到指定父級里面的指定節點之前
(2)、使用方式：父級節點.insertBefore( 要插入的節點，指定節點 )
(3)、JS代碼：（注：每執行一次新方法時，上一個方法都會被注釋掉，為了易懂，此處注釋一次，下面的文章中將不再把注釋上一個方法的代碼發上來）
document.onclick = function(){ //oDiv2.appendChild(oB2);此處將上一個方法注釋 oDiv2.insertBefore(oB2,oSpan2);//將b2插入到div2中的span2前面 }
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法，但是值得注意的是，如果第二個參數節點不存在，在IE和Safari下會把要添加的節點使用appendChild()方法追加到指定父級中，而其他主流瀏覽器（Firefox、Chrome、Opera等）下會報錯，所以在插入節點的時候，需要先判斷第二個參數節點是否存在
三、jQuery中添加節點一共有4組方法，每組方法有2種方式
第一組：before()、insertBefore()
第二組：after()、insertAfter()
第三組：prepend()、prependTo()
第四組：append()、appendTo()
1、第一組的before()
(1)、概念：在指定節點的前面添加要添加的節點
(2)、使用方式：指定節點.before( 要添加的節點 )
(3)、JS代碼：
先隨便導入個jQuery（此時默認上邊通過原生JS獲取元素的方法的代碼已被刪除，並且導入jQuery的代碼只發一次，后面的文章中不再發）
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
$(document).click(function(){ $('#span2').before( $('#b2') );//在span2的前面添加b2 })
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法
2、第一組的insertBefore()
(1)、概念：把要插入節點插入到指定節點的前面
(2)、使用方式：要插入的節點.insertBefore( 指定節點 )
(3)、JS代碼：
$(document).click(function(){ $('#b2').insertBefore( $('#span2') );//將b2插入到span2的前面 })
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法
3、第二組的after()
(1)、概念：把要添加的節點添加到指定節點的后面
(2)、使用方式：指定節點.after( 要添加的節點 )
(3)、JS代碼：
$(document).click(function(){ $('#span2').after( $('#b2') );//在span2的后面添加b2 })
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法
4、第二組的insertAfter()
(1)、概念：把要插入的節點插入到指定節點的后面
(2)、使用方式：要插入的節點.insertAfter( 指定節點 )
(3)、JS代碼：
$(document).click(function(){ $('#b2').insertAfter( $('#span2') );//將b2插入到span2的后面 })
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法
5、第三組的prepend()
(1)、概念：在指定父級里面的最前面添加指定節點
(2)、使用方式：父級節點.prepend( 要添加的節點 )
(3)、JS代碼：
$(document).click(function(){ $('#div2').prepend( $('#b2') );//在div2里面的最前面添加b2 })
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法
6、第三組的prependTo()
(1)、概念：把指定節點添加到指定父級里面的最前面
(2)、使用方式：要添加的節點.prependTo( 父級節點 )
(3)、JS代碼：
$(document).click(function(){ $('#b2').prependTo( $('#div2') );//將b2添加到div2里面的最前面 })
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法
7、第四組的append()（注：此方法基本等同於原生JS的appendChild方法）
(1)、概念：在指定父級里面的最后面添加指定節點
(2)、使用方式：父級節點.append( 要添加的節點 )
(3)、JS代碼：
$(document).click(function(){ $('#div2').append( $('#b2') );//在div2里面的最后面添加b2 })
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法
8、第四組的appendTo()
(1)、概念：把指定節點添加到指定父級里面的最后面
(2)、使用方式：要添加的節點.appendTo( 父級節點 )
(3)、JS代碼：
$(document).click(function(){ $('#b2').appendTo( $('#div2') );//把b2添加到div2里面的最后面 })
(4)、圖示：
(5)、兼容性：所有瀏覽器都支持此方法
四、JQuery中添加節點的4組方法每組之間的區別
1、發現問題：眼尖的朋友不難發現，jquery這4組添加節點的方法，每組的2種方法達到的效果幾乎都差不多，那么他們到底有什么不同呢？我來拿舉個例子大家就清楚了
2、舉例說明：我們拿第四組來當例子，現在我要將剛才的JS代碼做一些修改，在后邊用css方法添加背景色
3、給用append()方法的代碼加css方法
(1)、JS代碼：
$(document).click(function(){ $('#div2').append( $('#b2') ).css('background','red');//在div2里面的最后面添加b2，並給返回來的jquery對象加背景色 })
(2)、圖示：
4、給用appendTo()方法的代碼加css方法
(1)、JS代碼：
$(document).click(function(){ $('#b2').appendTo( $('#div2') ).css('background','red');//把b2添加到div2里面的最后面，並給返回來的jquery對象加背景色 })
(2)、圖示：
五、總結
通過上面的2張圖，可以發現，通過append()與appendTo()方法雖然都可以進行添加節點的操作，但是他們返回的jquery對象是不同的，而我們有時候要對添加節點后返回的jQuery對象進行后續操作，所以，我們在選擇添加節點的方法的時候，要根據我們的實際需求來選擇。（其他3組的也是同理，這里就不一一細說了）