.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. php验证码处理

    //基本步骤 1,先创建一张指定宽度和高度的一张验证码图片 imagecreatetruecolor() 2,给验证码图片添加背景颜色 和文字颜色 imagecolorallocate() 3, 在指 ...

  2. ip地址在通信中的变化(就简单的讲一下, 给自己mark)

    节点之间的通信 数据报文的封装(自上而下) http tcp ip mac(讯框) 数据报文的源ip和目标ip是不变的(在内网中, 如果考虑到连接到外部网路的时候, 如果有路由器(里面有嵌入式的Lin ...

  3. Emacs学习笔记1

    Emacs笔记-Emacs基本的文本操作 使用命令时要在minibuffer缓冲区中 关于文件 注意 在对单词的操作中C开头的控制范围要比M开头的控制范围要下 对于文件的撤销操作, 不要使用C-x, ...

  4. Win7无法将图标(Chrome谷歌浏览器更新后无法锁定也适用)锁定到任务栏解决办法

    “将程序锁定到任务栏”是Windows 7中的一个非常有用的功能,它比之前的快速启动栏要来得简洁.但是我用了一段时间之后,发现“锁定到任务栏”这一个选项消失了,对图标点右键找不到这个图标,直接把图标拖 ...

  5. 第一次尝试用Open Live Writer写日志

    注册博客园很久了,一直没怎么用,今天登陆了一下,看到这个写日志工具,看着不错,试一下

  6. linux 查看防火墙状态

    1.查看防火墙状态 systemctl status firewalld firewall-cmd --state #查看默认防火墙状态(关闭后显示notrunning,开启后显示running) 2 ...

  7. easyui datagrid 动态加载数据 渲染问题,表格错位问题

    $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...

  8. MyEclipse快捷键大全,很实用

    Eclipse本身很快的,但是加上了myeclipse后,就狂占内存,而且速度狂慢,那如何让Eclipse拖着myeclipse狂飚呢?这里提供一个: 技巧:取消自动validation  valid ...

  9. Java笔记 —— 方法重载和方法重写

    Java笔记 -- 方法重载和方法重写 h2{ color: #4ABCDE; } a{ text-decoration: none !important; } a:hover{ color: red ...

  10. 【菜鸟学Linux】Cron Job定期删除Log(日志)文件

    以前一直做Windows开发,近期的项目中要求使用Linux.作为小菜鸟一枚,赶紧买了一本经典书<鸟哥的Linux私房菜>学习.最近刚好有一个小任务 - 由于产品产生的Log很多,而且增长 ...