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

      效果:
       

  • 相关阅读:
    第3天:视图提取请求参数和响应对象
    第2天:Django路由与视图
    第1天:Django框架简介与工程创建
    Jenkins多选项框使用
    备份Kylin的Metadata
    前台传值 后台接受乱码
    查询表的列名,字符类型
    html div隐藏后取消所占的空位
    bootstrap 利用jquery 添加disabled属性
    bootstrap datetimepicker 复选可删除,可规定指定日期不可选
  • 原文地址:https://www.cnblogs.com/nmxs/p/4932378.html
Copyright © 2011-2022 走看看