jquery的after与insertAfter的区别

20 篇文章 0 订阅
10 篇文章 0 订阅

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>

自然状态下显示是这样的:

 

1

 

 

 

 

添加脚本:$(‘.first’).insertAfter($(‘.last’));

则会把first移到last后面去,变成了这样:

2

 

 

 

 

如果把insertAfter方法换为after,效果则为:

3

 

 

 

从上述对比可以看出,其实这两个方法的差别就像主语跟宾语的差别一样,是主与从的问题。

after方法,是把参数元素移到调用方法的元素的后面,而insertAfter方法则恰恰相反,是把调用方法的元素插入到参数元素的后面。

另外要注意的是,当要用这两个方法在dom树中添加新元素时,如”<li>new</li>”,这样的html字符串不能出现在after方法的调用主体或insertAfter的参数中,因为这样一来,jquery不知道要把新元素放到哪里去,反而会导致要相关的原有元素丢失。

引自:黑天鹅工作室

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值