轉載來源：http://blog.csdn.net/ss1106404013/article/details/49274345
添加節點的jQuery方法： append()、prepend()、appendTo() 、prependTo()
插入節點的jquery方法： after() 、before() 、insertBefore() 、insertAfter()
舉個例子來說明以上幾種方法的用法：
html例子:
<nav>
<ul>
<li>序列號1</li>
<li>序列號2</li>
<li>序列號3</li>
</ul>
</nav>
添加節點
1、append()方法：
script:
var $div = '<div>append添加的節點</div>';
$('nav').append($div); //將新創建的div節點插入到nav容器的內容底部
html：
<nav>
<ul>
<li>序列號1</li>
<li>序列號2</li>
<li>序列號3</li>
</ul>
<div>append添加的節點</div>
</nav>
2、prepend()方法：
script:
var $div = '<div>append添加的節點</div>';
$('nav').append($div); //將新創建的div節點插入到nav容器的內容頂部
html：
<nav>
<div>prepend添加的節點</div>
<ul>
<li>序列號1</li>
<li>序列號2</li>
<li>序列號3</li>
</ul>
</nav>
3、appendTo()方法：
script:
var $div = '<div>append添加的節點</div>';
var nav = $('nav'); //$div.appendTo($nav); //這樣寫是錯誤的 $('<div>append添加的節點</div>').appendTo($nav);//真理在這里。。 將新創建的節點添加到nav的內容后面
html：
<nav>
<ul>
<li>序列號1</li>
<li>序列號2</li>
<li>序列號3</li>
</ul>
<div>appendTo添加的節點</div>
</nav>
4、prependTo()方法：
script:
var $div = '<div>append添加的節點</div>';
var nav = $('nav'); //$div.prependTo($nav); //和前面同理，這樣寫是錯誤的 $('<div>append添加的節點</div>').appendTo($nav);//真理在這里。。 將新創建的節點添加到nav的內容的前面
html：
<nav>
<div>prependTo添加的節點</div>
<ul>
<li>序列號1</li>
<li>序列號2</li>
<li>序列號3</li>
</ul>
</nav>
插入節點
5、after()方法：
script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2));
var nav = $('nav'); $l_2.after($l_1); //這里可以這么理解，第2個li后面跟着第1個li。
html：
<nav>
<ul>
<li>序列號2</li>
<li>序列號1</li>
<li>序列號3</li>
</ul>
</nav>
6、before()方法：
script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2));
var nav = $('nav'); $l_1.before($l_2); //這里可以這么理解，第1個li前面是第2個li。
html：
<nav>
<ul>
<li>序列號2</li>
<li>序列號1</li>
<li>序列號3</li>
</ul>
</nav>
7、insertBefore()方法：
script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2));
var nav = $('nav'); $l_2.insertBefore($l_1); //將第2個li插入到第1個li前面
html：
<nav>
<ul>
<li>序列號2</li>
<li>序列號1</li>
<li>序列號3</li>
</ul>
</nav>
8、insertAfter()方法：
script:
var $l_1 = $('ul>li:nth-of-type(1));
var $l_2 = $('ul>li:nth-of-type(2));
var nav = $('nav'); $l_1.insertAfter($l_2); //將第1個li插入到第2個li后面
html：
<nav>
<ul>
<li>序列號2</li>
<li>序列號1</li>
<li>序列號3</li>
</ul>
</nav>
容易出現問題的地方在 appendTo()和preappendTo()。