首页 > JavaScript > jquery append()和appendTo()深入学习
2009五月31

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

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

文章作者:simaopig
本文地址:http://www.xiaoxiaozi.com/2009/05/31/694/
版权所有 © 转载时必须以链接形式注明作者和原始出处!

23 Responses to “jquery append()和appendTo()深入学习”

  1. #1 duweb 回复 | 引用 Post:2011-05-06 16:54

    如果要插入的字符中有(),例:$(“(“+maxvalue+”);”).appendTo($(“div”));该如何写呢!上面的写法只能插入1232134其中的()放不进去!期待你的回答!

    [回复]

  2. #2 simaopig 回复 | 引用 Post:2011-05-06 17:11

    @duweb
    appendTo 前面不能为普通字符串的。。

    [回复]

  3. #3 simaopig 回复 | 引用 Post:2011-05-06 17:12

    @duweb
    $(“#foo”).append(“(123456)”);

    [回复]

评论分页

发表评论

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)