zoukankan      html  css  js  c++  java
  • jquery操作DOM 元素(2)

    .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');

      效果:
       

  • 相关阅读:
    数据结构与算法入门---基本概念
    java 的异常处理
    RESTful API
    数据结构
    错误代码 2003不能连接到MySQL服务器在*.*.*.*(10061)
    MySQL有四种BLOB类型
    如何彻底卸载MySQL
    Mysql 逗号分隔行列转换总结
    如何判断滚动条滚到页面底部并执行事件
    响应式布局之浮动圣杯布局(双飞翼布局)—-自适应宽度布局
  • 原文地址:https://www.cnblogs.com/nmxs/p/4932378.html
Copyright © 2011-2022 走看看