jquery中關於append()的用法筆記---append()節點移動與復制之說
今天看一本關於jquery的基礎教程，看到其中一段代碼關於append()的一行，總是百思不得其解。於是查了查官方的文檔，貌似對這個解釋的不是特別清楚。於是，親自寫了一段小白代碼做了下測試，這才明白怎么回事。簡言之就是，如果是將一個節點（本身存在於文檔中）同時append（）到很多節點下，那么就是同時復制到每個節點下一份；如果是將一個節點（本身存在於文檔中）append()到一個節點下，那就是移動，並不會復制多份；而另一種情況是，如果新創建的一個節點字符串，不管是同時append()一個節點下還是很多個節點下，那么都是將這個復制到每一個節點下的。好了，廢話不多說了，下面上代碼。
1、原來的HTML，在這里test.js里面沒有東西暫時未空的
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 <head> 5 <meta charset="utf-8"> 6 <title>Test</title> 7 8 <script src="jquery.js"></script> 9 <script src="test.js"></script> 10 </head> 11 <body> 12 <span>Hello,LaoXu!</span> 13 <p></p> 14 <p></p> 15 <p></p> 16 17 </body> 18 </html>
運行效果圖
2、編寫test.js，選中一個節點，同時append()到很多節點下
1 $(function(){ 2 $('p').append($('span')); 3 });
運行效果如下（原來的span標簽被移動並同時復制到p標簽下）：
3、修改test.js，選中一個節點，一次append()到一個節點下
1 $(function(){ 2 $('p:eq(0)').append($('span')); 3 $('p:eq(1)').append($('span')); 4 $('p:eq(2)').append($('span')); 5 });
效果如下：
在debug下看，知道span被移動到了最后一個p下。
4、新建一個字符串，將其同時append()到很多節點下：
1 $(function(){ 2 var abc = "<span>Hello,LaoXu!<span>"; 3 $('p').append(abc); 4 });
效果圖：
可見，同時復制到了每個節點下。
5、新建一個字符串，將其每次append()到一個節點下：
1 $(function(){ 2 var abc = "<span>Hello,LaoXu!<span>"; 3 $('p:eq(1)').append(abc); 4 $('p:eq(2)').append(abc); 5 $('p:eq(0)').append(abc); 6 });
效果如下：
結果跟上圖情況一樣。
廢話了半天，總之一句話，append()是將一個本身存在的節點append()到很多節點下，那就是將原來的節點同時復制到每個節點下，同時原來的節點消失；如果是將一個節點每次append()到一個節點下，那就是移動。如果是新建的字符串節點，那都是復制。
廢話了半天，一點愚見，歡迎交流。