## 插入節點和刪除節點 ### 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.appendTo('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(); ~~~