jquery中after与insertAfter有什么区别 - 面向对象网,web开发,jquery,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Jquery > 正文

jquery中after与insertAfter有什么区别

来源: www.bianceng.cn 阅读:

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不知道要把新元素放到哪里去,反而会导致要相关的原 有元素丢失。

查看本栏目更多精彩内容:http://www.bianceng.cn/webkf/jquery/

Tags:
相关文章列表: