## 插入節點和刪除節點
### 1.插入節點的方法
| 方法 | 描述 |
| --- | --- | --- |
| `append()` | 向每個元素內部追加內容 |
| `appendTo()` |將所有匹配的元素追加指定的元素中 |
| `prepend()` | 向每個匹配的元素內部前置內容 |
| `prependTo()` | 將所有匹配的元素前置到指定元素中 |
| `after()` | 在每個匹配的元素之后插入內容 | |
| `insertAfter()` | 將所有匹配的元素插入到指定元素的后面 |
|`before()`|在每個匹配的元素之前插入內容|
|`insertBefore()`|將所有匹配的元素插入到指定元素的前面|
~~~javascript
var $li_1 = $("<li title='香蕉'>香蕉</li>");
var $li_2 = $("<li title='雪梨'>雪梨</li>");
var $li_3 = $("<li title='其他'>其他</li>");
var $parent = $('ul');
$parent.append($li_1);
$parent.prepend($li_2);
var $two_li = $('ul li:eq(1)');
$li_3.insertAfter($two_li);
~~~
### 2.刪除節點
jQuery提供了三種方法刪除節點：remove(),detach(),empty()。
**1.remove()方法**
> ` remove()`方法的返回值是被刪除節點的引用。
~~~
var $li = $('ul li:eq(1)').remove();//刪掉第二個
$li.append('ul');
~~~
> remove()方法還可以通過傳遞參數來選擇性的刪除元素。
~~~javascript
$('ul li').remove('li[title!=菠蘿]');
~~~
**2.detach()方法**
同樣是從DOM中去掉所有匹配的元素，但不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。
~~~javascript
$('ul li').click(function(){
alert($(this).html());
});
var $li = $('ul li:eq(1)').detach();
$li.appendTo('ul');//綁定事件還在
~~~
**3.empty()方法**
嚴格來講，empty()方法并不是刪除節點，而是清空節點，它能清空元素中所有后代節點。
~~~javascript
var $li = $('ul').empty();
~~~
