jquery append()和appendTo()深入学习

时间：2009年05月31日作者：simaopig评论次数：23

虽然之前写jQueryDOM操作——基于命令改变页面的时候，已经学过了这两个方法，

不过，今天坐车看书的时候，发现append()和appendTo()的区别，我竟然想不起来了。无奈，继续学习之。

只有深入的学习之后才能让自己记的更扎实一些，否则自己这个经常选择性遗忘一些东西的脑袋还真是记不住啥。

先来看一下API上面的说明，这可以帮助我们更好的理解这两个方法：

append(content)

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

appendTo(content)

把所有匹配的元素追加到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。


这貌似已经说的很明白了，不过不经过实例，我咋能理解这么深呢？呵呵。

        append(content)

        向<font color='red'>每个匹配的元素</font>内部追加内容。
        <br/>
        这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
       
        <br/>
        <p class='append_p'>welcome</p>
       
        <p class='append_p'>欢迎</p>
       
        <input type='button' id='append_button' value='append示例' />
       
        <br/>
        appendTo(content)

        把<font color='red'>所有匹配的元素</font>追加到另一个、指定的元素元素集合中。
        <br/>
        实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

        <br/>
        <p class='appendto_p'>welcome</p>
       
        <p class='appendto_p'>欢迎</p>
       
        <input type='button' id='appendto_button' value='appendto示例' />
        $(document).ready(function(){
            $('#append_button').click(function(){
                $('p.append_p').append('<b><a href="http://www.xiaoxiaozi.com/" target="_blank">xiaoxiaozi.com</a></b>');
            });
           
            $('#appendto_button').click(function(){
                $('<b><a href="http://www.xiaoxiaozi.com/" target="_blank">xiaoxiaozi.com</a></b>').appendTo('p.appendto_p');
            });
        });

呵，看到结果了吧？就是这样的：

append()前面是要选择的对象，后面是要在对象内插入的元素内容

appendTo()前面是要插入的元素内容，而后面是要选择的对象

套用wangsong76说的话：

可是$(“p”).append(“任意字符串”); 和$(“任意字符串”).appendTo(“p”);这两个操作是否等同呢？

并不是简单的等同，是有条件的。嗯。

但是并不像wangsong76说过的那样，是IE和FIREFOX的区别，我认为不是这样的。

例如：html部分和上例中相同，我们来更改JS部分

        $(document).ready(function(){
            $('#append_button').click(function(){
                $('p.append_p').append('xiaoxiaozi.com');
            });
           
            $('#appendto_button').click(function(){
                $('xiaoxiaozi.com').appendTo('p.appendto_p');
            });
        });

看到了吧？第二个函数没有任何作用？原因是啥？

我感觉应该是jQuery中无法把$(‘纯字符串，非HTML语句或对象’)当做jQuery对象。

标签：,分类：JavaScript

您可能感兴趣的文章

23条评论
  1. Jutoy留言于:2009年05月31日16:42

    小小子最近写的东西忒专业……每次来都只能灰溜溜地路过…这次不管了，要个沙发坐坐~

    [回复]

  2. simaopig留言于:2009年05月31日16:44

    @Jutoy
    呃，呵呵。来就聊聊天。不怕哈。

    术业有专攻，像我，就一点不懂摄影和设计。呵。

    [回复]

  3. Zeric留言于:2009年05月31日17:39

    看你这学习的劲，唉，我可真惭愧啊。

    [回复]

  4. simaopig留言于:2009年05月31日17:45

    @Zeric
    就是因为不会才学啊。。要不然我可是比谁都懒的啊。。

    有时候一想，自己真的似乎啥也不会。于是会郁闷好久。呵。

    [回复]

  5. 粥小卜留言于:2009年05月31日22:35

    ……是啊 很专业 菜鸟路过~

    [回复]

  6. simaopig留言于:2009年05月31日22:43

    @粥小卜
    欢迎喜欢“乱扔钱”的小粥同学光临寒舍。呵。

    [回复]

  7. 随影留言于:2009年06月26日13:24

    jquery 为什么这麽强大呢 ？？ 哈哈！！

    [回复]

  8. 随影留言于:2009年06月26日13:25

    $函数只能返回dom对象！！

    [回复]

  9. simaopig留言于:2009年06月26日13:25

    @随影
    正确的说，返回的应该是jQuery对象！ :-o

    [回复]

  10. john留言于:2010年05月20日15:56

    append 和appendTo都只是追加字符串？

    [回复]

  11. simaopig留言于:2010年05月20日15:59

    @john
    可以追加元素。呵呵。

    [回复]

  12. 花生鱼留言于:2010年06月03日14:45

    1

    2

    $(“div”).append($(“#dd”));
    结果是

    1

    2

    $(“#dd”).appendTo($(“div”));
    结果是

    1

    2

    求解释.

    你上面那段：
    $(document).ready(function(){
    $(‘#append_button’).click(function(){
    $(‘p.append_p’).append(‘xiaoxiaozi.com’);
    });

    $(‘#appendto_button’).click(function(){
    $(‘xiaoxiaozi.com’).appendTo(‘p.appendto_p’);
    });
    });

    第2句是不是可以写成这样.
    $(‘xiaoxiaozi.com’).appendTo($(‘p.appendto_p’));

    [回复]

  13. 花生鱼留言于:2010年06月03日14:52

    不能发代码，哎。。。
    div p>12</p /div

    这样应该没问题了
    $(“div”).append($(“#dd”));
    $(“#dd”).appendTo($(“div”));
    这两个结果就不一样
    alert($(document.body).html());

    [回复]

  14. 花生鱼留言于:2010年06月03日14:54

    希望能够发出去，并且您能看得到

    [回复]

  15. simaopig留言于:2010年06月03日14:54

    @花生鱼
    呵呵。我现在暂时没有时间测试。等晚上到家后给你结果。
    另外，可以发代码的。可以使用

    [code][/code] 在标签里加 lang=来写代码。

    [回复]

  16. 花生鱼留言于:2010年06月03日14:58

    好，那我再重新发一下

    1

    2

    $("div").append($("#dd"));
    结果是

      1


      2
     
       
     


    $("#dd").appendTo($("div"));
    结果是

      1
     
       
       
     

      2

    希望成功 :mrgreen:

    [回复]

  17. 花生鱼留言于:2010年06月03日15:00

    [code]
    1

    2

    $("div").append($("#dd"));
    结果是

    1

    2

    $("#dd").appendTo($("div"));
    结果是

    1

    2

    [/code]
    前面的垃圾评论你到时候来删吧，不好意思啦

    [回复]

  18. simaopig留言于:2010年06月03日15:01

    @花生鱼
    你加我QQ吧。在“小小子”页面找得到。呵。

    [回复]

  19. 9streets留言于:2010年08月26日08:25

    可以做个友情链接不 qq:455342107 PHP博客：http://www.9streets.cn

    [回复]

  20. simaopig留言于:2010年08月26日09:35

    @9streets
    你好，单纯的友链没有什么意义，先交朋友吧。嗯。

    [回复]

1 2
发表评论

*

*