专栏首页技术小牛jquery的after与insertAfter的区别

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

引自:黑天鹅工作室

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • DOM常用外部插入方法与区别

    节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系。之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄...

    小周sri的码农
  • jQuery 基本语法

    jQuery,一个 JavaScript 库,极大地简化了 JavaScript 编程,很容易学习。它是一款同prototype、Note.js等一样优秀的js...

    阳光岛主
  • JQuery基础学习

    JQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQue...

    乐心湖
  • Jquery基本用法总结

    选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素(组合型) $(".mydiv") 通过 class="mydi...

    欢醉
  • jQuery知识点笔记-常用方法

    小蓝枣
  • jQuery基础教程之文档处理

    appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。把原来的删除,放到新的地方

    老雷PHP全栈开发
  • 前端基础-JQuery(一)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    cwl_java
  • jQuery笔试题汇总整理--2018

    1、最大的一点是页面无刷新,用户的体验非常好。 2、使用异步方式与服务器通信,具有更加迅速的响应能力。 3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户...

    用户1272076
  • 第50次文章:JQuery基础

    tips:window.onload 和 $(function)异同:两者的功能相同,都是等到页面加载结束之后,再执行内部的代码。但是有一定的区别,主要是win...

    鹏-程-万-里
  • JQuery干货篇之操控DOM

    通常在把新元素插入到DOM中的目标位置之前,要先创建一个新元素才能将它插入到指定位置

    爱撒谎的男孩
  • JQuery的学习

    Rochester
  • JavaScript学习总结(五)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非...

    张果
  • JavaScript学习总结(五)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非...

    张果
  • jQuery设计思想

    jQuery是目前使用最广泛的javascript函数库。 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQue...

    ruanyf
  • jquery 使用方法

    jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuer...

    PM吃瓜
  • 好久不用 jQuery, 来复习一下

      jQuery 是一个优秀的 JavaScript 库,是一个由 JohnResig 创建于 2006 年 1 月的开源项目。现在的 jQuery 团队主要包...

    Demo_Null
  • jquery 元素节点操作 - 创建节点、插入节点、删除节点

    前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。

    Devops海洋的渔夫
  • jQuery DOM操作

    对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成,非常便利。 插入节点 jQuery提供了8种插入节点的方法。 序号 方法 ...

    静默虚空
  • jQuery DOM操作

    在目标对象前插入同级兄弟元素(不是头部,而是外面,和对象并列同级),参数和append类似

    bamboo

扫码关注云+社区

领取腾讯云代金券