jquery的after与insertAfter的区别
jquery的dom操作方法中,包括了after与insertAfter,这两个方法名字相近,所实现的功能从名字中不容易分辨,所以在经过试验后撰文一篇以加深记忆。
测试代码如下:
<html>
<head>
<meta charset=”utf-8″>
<title>测试insertAfter与after的区别</title>
</head>
<body>
<ul>
<li class=”first”>first</li>
<li class=”middle”>middle</li>
<li class=”last”>last</li>
</ul>
</body>
</html>
自然状态下显示是这样的:
添加脚本:$(‘.first’).insertAfter($(‘.last’));
则会把first移到last后面去,变成了这样:
如果把insertAfter方法换为after,效果则为:
从上述对比可以看出,其实这两个方法的差别就像主语跟宾语的差别一样,是主与从的问题。
after方法,是把参数元素移到调用方法的元素的后面,而insertAfter方法则恰恰相反,是把调用方法的元素插入到参数元素的后面。
另外要注意的是,当要用这两个方法在dom树中添加新元素时,如”<li>new</li>”,这样的html字符串不能出现在after方法的调用主体或insertAfter的参数中,因为这样一来,jquery不知道要把新元素放到哪里去,反而会导致要相关的原有元素丢失。
相关推荐
周公周金桥 2020-09-06
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
MaureenChen 2020-04-21
xingguanghai 2020-03-13
teresalxm 2020-02-18
木四小哥 2013-05-14
SoShellon 2013-06-01
Simagle 2013-05-31
羽化大刀Chrome 2013-05-31
waterv 2020-01-08
LutosX 2013-07-29
vanturman 2013-06-27
wutongyuq 2013-04-12
luoqu 2013-04-10
today0 2020-09-22
89520292 2020-09-18
bigname 2020-08-25