## 插入节点和删除节点 ### 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(); ~~~