1.刪除操作
(1)remove()
$(selector).remove([selector])
$("#div3").remove(); //刪除 id 為 div3 的 div 標簽
$("div").remove("#div3"); //刪除 div 標簽中 id 為 "div3" 的標簽
(2)detach()
$(selector).detach([selector])
$("#div3").detach(); //刪除 id 為 div3 的 div 標簽
$("div").detach("#div3"); //刪除 div 標簽中 id 為 "div3" 的標簽
(3)empty()
$(selector).empty()
$("#div3").empty(); //刪除 id 為 div3 的節點的所有子節點
總結:remove 方法和 detach 方法的返回值均為被刪除的jQuery節點對象,不同的是,前者指保留該對象節點本身,其他綁定的事件及附加的數據等都會被移除。而后者全部保留。empty 方法則是將指定節點的所有子節點刪除,本身保留。
2.復制節點 clone()
$(selector).clone([true]);
帶true參數則復制出來的節點具備原節點所綁定的事件處理程序。
3.替換節點
(1)replaceAll()
$(content).replaceAll(selector);
(2)replaceWith()
$(selector).repalceWith(content);
這兩種方法在使用時效果完全相同,都是用 content 代替 selector.
4.內部插入
內部插入是將content插入到selector節點內部,包括內部的頭部和尾部。插入后的節點與原節點是父子關系。
(1)append()
將content添加到seletor內部的頭部。
$(selector).append(content);
$(selector).append(function(index [,html]){...});
如果要獲取selector的元素index及html內容,則采用第二種方法。調用的實例如下(html是可選參數):
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script src="../js/jquery-1.7.2.js" type="text/javascript"></script> 6 <title>內部插入應用示例</title> 7 <script language="javascript" type="text/javascript"> 8 $(document).ready(function(){ 9 $("#btn").click(function(){ 10 //方法1 用 eq() 選擇器找到指定節點 11 //$("div:eq(1)").append("<b>jQuery內部插入測試</b>"); 12 //方法2 用函數的參數index索引值找到指定節點 13 $("div").append(function(index, html){ 14 if(index == 1){ 15 return "<b>jQuery內部插入測試</b>" + " " + html; 16 } 17 }); 18 }); 19 }); 20 </script> 21 </head> 22 <body bgcolor="#EEEEEE"> 23 <h1>內部插入應用實例</h1> 24 <div> 25 <button id="btn">測試</button> 26 <div id="div1">1.水果</div> 27 <div id="div2">2.蔬菜</div> 28 <div id="div3">3.肉類</div> 29 </div> 30 </body> 31 </html>
運行及點擊測試按鈕之后的效果如下:

(2)appendTo()
$(content).appendTo(selector);
(3)prepend()
將content添加到seletor內部的尾部。
$(selector).prepend(content);
$(selector).prepend(function(index [,html]){...});
(4)prependTo()
$(content).prependTo(selector);
前兩種方法效果相同,后兩種方法效果相同。
5.外部插入
外部插入是將content插入到selector節點外部,包括selector節點的前面和后面。插入后的節點與原節點是兄弟關系。
(1)after()
$(selector).after(content);
$(selector).after(function(index [,html]){...});
(2)insetAfter()
$(content).insertAfter(selector);
(3)before()
$(selector).before(content);
$(selector).before(function(index [,html]){...});
(4)insertBefore()
$(content).insertBefore(selector);
使用方法與內部插入類似。
6.包裹操作
(1)wrap()
$(selector).wrap(wrapper);
$(selector).wrap(function(){...});
下面代碼中的四種方法效果相同:
1 $(document).ready(function(){ 2 $("#btn").click(function(){ 3 var newNode = $("<b></b>"); 4 //方法1 5 //$("#div2").wrap(newNode); 6 //方法2 7 //$("#div2").wrap("<b></b>"); 8 //方法3 9 //$("#div2").wrap(document.createElement("b")); 10 //方法4 11 $("#div2").wrap(function(){ 12 return "<b></b>"; 13 }); 14 }); 15 });
(2)unwrap()
$(selector).unwrap();
(3)wrapAll()
$(selector).wrapAll(wrapper);
(4)wrapInner()
$(selector).wrapInner(wrapper);
$(selector).wrapInner(function(){...});
總結:wrap() 和 wrapInner() 的顯示效果相同,不同的是前者為 seletor 添加了父節點,而后者為 selector 添加了子節點。
wrap() 和 wrapAll() 顯示效果也相同,不同的是前者為 seletor 中的每一個子元素均添加父節點,而后者為整個 seletor 只添加一個父節點
