.after()
  在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。
  .after(content[,content])
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
  .after(function)
    function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。
  结构:
    <div class="container">
      <h2>Greetings</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    $('.inner').after('<p>Test</p>');
  效果:
    <div class="container">
      <h2>Greetings</h2>
      <div class="inner">Hello</div>
      <p>Test</p>
      <div class="inner">Goodbye</div>
      <p>Test</p>
    </div>

.before()
  根据参数设定,在匹配参数的前面插入插入内容。
  .after(content[,content])
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
    content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。
  .after(function)
    function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面。 this指向中当前位置。
  结构:
    <div class="container">
      <h2>Greetings</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    $('.inner').before('<p>Test</p>');
  效果:
    <div class="container">
      <h2>Greetings</h2>
      <p>Test</p>
      <div class="inner">Hello</div>
      <p>Test</p>
      <div class="inner">Goodbye</div>
    </div>

.insertAfter()
  在目标元素的后面插入集合中每个匹配的元素,插入的元素作为目标元素的兄弟元素。
  .insertAfter(target)
    target 一个选择器,元素,HTML字符串或者对象,匹配的元素将会被插入在由参数指定的目标后面。
  结构:
    <div class="container">
      <h2>Greetings</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    $("<p>Test</p>").insertAfter('.insertAfter');
  效果:
    <div class="container">
      <h2>Greetings</h2>
      <div class="inner">Hello</div>
      <p>Test</p>
      <div class="inner">Goodbye</div>
      <p>Test</p>
    </div>

.insertBefore()
  在目标元素的前面插入集合中每个匹配的元素,插入的元素作为目标元素的兄弟元素。
  .insertBefore(target)
      target 一个选择器,元素,HTML字符串或者对象,匹配的元素将会被插入在由参数指定的目标前面。
  结构:
    <div class="container">
      <h2>Greetings</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    $("<p>Test</p>").insertBefore('.insertAfter');
  效果:
    <div class="container">
      <h2>Greetings</h2>
      <p>Test</p>
      <div class="inner">Hello</div>
      <p>Test</p>
      <div class="inner">Goodbye</div>
  </div>

jquery操作DOM 元素(2)的更多相关文章

  1. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  2. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  3. jquery 操作DOM元素(1)

    .clone() 创建一个匹配的元素集合的深度拷贝. .clone([withDataAndEvents]) withDataAndEvents (默认为false) 一个Boolean 表示是否会复 ...

  4. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  5. jquery操作DOM 元素(3)

    .detach() 从DOM 中去掉所匹配的元素. .detach([selector]) selector 一个选择表达式将需要移除的从匹配的元素中过滤出来. $("p").de ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第5章 jQuery 操作DOM元素

    1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使 ...

  7. Jquery 操作DOM元素

    一.文本输入框: text <input type=”text” value=”99.com” size=12 id=”input1” /> 1.获取文本值: $("#input ...

  8. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  9. JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

随机推荐

  1. python-常用模块整理

    学习背景 最近需要进行文件夹数据的批量读取,里面会用到python里面的os模块.但是对os模块又不是很熟悉,里面的函数有哪些函数?有什么用?怎么用?英语不好的每次看官方文档也比较费力,所以就想着看看 ...

  2. PlayMaker 对 PlayMakerFSM 里变量的操作

    HutongGames.PlayMaker; //需要引用这个命名空间 红色的字体是对变量的操作,其他的没啥关系. #region 判断为 PlayMakerFSM 组件时 if (behaviour ...

  3. LeetCode 110.平衡二叉树(C++)

    给定一个二叉树,判断它是否是高度平衡的二叉树. 本题中,一棵高度平衡二叉树定义为: 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1. 示例 1: 给定二叉树 [3,9,20,null,nu ...

  4. Prestashop后台模块(中英转译)

    =======================Prestashop-Modules========================= Pretashop运行起来非常慢,这个大家应该都知道,最近要给这个 ...

  5. mybatis连接mysql数据库实现的jdbc功能

    最近公司项目要使用myBatis,自己以前没有接触过,就在网上找到了一些资料研究了些.初步做出了基于myBatis连接mysql数据库的jdbc实现的功能. employee.java package ...

  6. 粗看ES6之字符串

    标签: javascript es6 字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一 ...

  7. nopcommerce3.6中文包

    nopCommerce 语言包,xml文件 点击下载:3.60_language_pack_zh.rar (60.82 kb) 下载后解压通过后台导入即可使用.如何导入?点击这里

  8. 资源管理与调度系统-YARN的基本架构与原理

    资源管理与调度系统-YARN的基本架构与原理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 为了能够对集群中的资源进行统一管理和调度,Hadoop2.0引入了数据操作系统YARN. ...

  9. 转:Windows任务计划实现自动执行ArcGIS相关功能

    今天一不小心点开了Windows任务计划,以前咩有怎么用过,发现还挺好用,于是想到了以前用户的一些问题 1:用户环境使用ArcSDE服务连接,每次运行到一定的负载量(可能是几天),就会很慢,用户就喜欢 ...

  10. mysql启动报错,与selinux相关

    mysql启动报错,与selinux相关 如果遇到报错,可能的情况是 selinux 的关系,可以安装 setroubleshoot-server 工具,使用 sealert -a /var/log/ ...