front-Thinking

志存高远,天道酬勤
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

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