jquery append appendTo使用问题小结
小小子
Say you say me ,say we together~~
首页 > 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对象。
查看更多关于jquery append appendTo使用问题小结的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did43595