jquery中关于append()的用法笔记---append()节点移动与复制之说
Posted on 2013-12-24 15:59 front-Thinking 阅读(3223) 评论(0) 编辑 收藏 举报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()到一个节点下，那就是移动。如果是新建的字符串节点，那都是复制。
废话了半天，一点愚见，欢迎交流。
