jQuery開發之DOM操作二，jquery開發dom
接上篇文章
3，插入節點
插入節點的方法如：
4，刪除節點
(1) remove()方法
作用是從DOM中刪除所有匹配的元素。範例程式碼如下：
var $li =$("ul li:eq(1)").remove(); //擷取第二個<li>節點後，將它從網頁中刪除。注意：當某個節點用remove()刪除後，該節點包含的所有後代節點將同時被刪除。這個方法的傳回值是一個指向被刪除節點的引用，因此可以在以後繼續使用這些元素。
(2) detach()方法
detach() 和remove()方法一樣，也是從DOM中去掉匹配的元素，但需要注意的是，這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件，附加的資料都會保留下來。
範例程式碼如下：
var $li =$("ul li:eq(1)").detach(); //擷取第二個<li>節點後，將它從網頁中刪除。(3) empty()方法
嚴格來說empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有後代節點。
範例程式碼如下：
var $li = $("ul li:eq(1)").empty(); //擷取第二個<li>節點後，清空元素裡的內容。5，複製節點
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>css ajax </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){ $("ul li:eq(2)").click(function(){ $(this).clone().appendTo("ul"); //複製當前單擊的節點，並將它追加到<ul>元素中。 });});</script></head><body><p title ="選擇最喜歡的水果">選擇最喜歡的水果</p><ul><li title ="蘋果">蘋果</li><li title ="橘子">橘子</li><li title ="菠蘿">菠蘿</li></ul></body></html>6，節點替換
如果要替換某個節點，jQuery提供了相應的方法，即replaceWith()和replaceAll();
replaceWith()方法的作用是將所有匹配的元素都替換成指定的HTML活著DOM元素。
範例程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>jQuery test </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){ $("p").replaceWith("<strong>你最不喜歡的水果是？</strong>")});</script></head><body><p title ="選擇最喜歡的水果">選擇最喜歡的水果</p><ul><li title ="蘋果">蘋果</li><li title ="橘子">橘子</li><li title ="菠蘿">菠蘿</li></ul></body></html>運行結果如下：
replaceAll()方法的範例程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>jQuery test </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){ $("<li>荔枝</li>").replaceAll("li")});</script></head><body><p title ="選擇最喜歡的水果">選擇最喜歡的水果</p><ul><li title ="蘋果">蘋果</li><li title ="橘子">橘子</li><li title ="菠蘿">菠蘿</li></ul></body></html>運行結果如下：
7，包裹節點
(1) wrap()方法
jQuery程式碼範例如下：
$("strong").wrap("<br></br>"); //用<br>標籤將<strong>元素包裹起來運行結果如下:
<br><srong>something</strong></br>(2) wrapAll()方法
該方法會將所有匹配的元素用一個元素來包裹，它不同於wrap()方法，wrap() 方法是將所有的元素進行包裹。
jQuery範例程式碼如下：
$("strong").wrapAll("<br></br>");運行結果如下：
<br><strong>你最喜歡的水果</strong><strong>你最不喜歡的水果</strong></br>(3) wrapInner()方法
該方法將每一個匹配的元素的字內容包括(文本節點) 用其結構化的標記包裹起來。jQuery範例程式碼如下：
$("strong").wrapInner("<br></br>");運行結果如下：
<strong><br>最喜歡的水果</br></strong>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
