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()到一个节点下，那就是移动。如果是新建的字符串节点，那都是复制。

　　废话了半天，一点愚见，欢迎交流。