jquery append()和appendTo()深入学习
虽然之前写jQueryDOM操作——基于命令改变页面的时候,已经学过了这两个方法,
不过,今天坐车看书的时候,发现append()和appendTo()的区别,我竟然想不起来了。无奈,继续学习之。
只有深入的学习之后才能让自己记的更扎实一些,否则自己这个经常选择性遗忘一些东西的脑袋还真是记不住啥。
先来看一下API上面的说明,这可以帮助我们更好的理解这两个方法:
append(content)
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
appendTo(content)
把所有匹配的元素追加到另一个、指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
<script></script><script></script><script></script><script></script><script></script><script></script>
这貌似已经说的很明白了,不过不经过实例,我咋能理解这么深呢?呵呵。
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对象。