jquery append appendTo使用问题小结

小小子

Say you say me ,say we together~~

• 首页
• 哥学社
• 围脖
• 淘宝店
• 唠呗
• 小小子
• Links

首页 > JS&HTML > jquery append()和appendTo()深入学习

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

2009年5月31日 simaopig

跳到评论

虽然之前写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对象。