jquery的after与insertAfter的区别
jquery的after与insertAfter的区别
风柏杨4711
发布于 2021-03-15 11:01:33
发布于 2021-03-15 11:01:33
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不知道要把新元素放到哪里去，反而会导致要相关的原有元素丢失。
引自：黑天鹅工作室
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2014-01-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读