zoukankan      html  css  js  c++  java
  • jquery中append、prepend, before和after方法的区别(一)

    原文:http://blog.csdn.net/woosido123/article/details/64439490

    在 jquery中append() 与 prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() 与before()是在元素的外面插入内容(其内容变成元素的兄弟节点)。

    1. append()和prepend()

    <div class='a'> 
      <div class='b'>b</div>
    </div>
    • 1
    • 2
    • 3
    • 1
    • 2
    • 3

    使用

    $('.a').append($('.c'));
    • 1
    • 1

    效果如下:

    <div class='a'> //<---you want div c to append in this
      <div class='b'>b</div>
      <div class='c'>c</div>
    </div>
    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4

    同样使用

    $('.a').prepend($('.c'));
    
    • 1
    • 2
    • 1
    • 2

    效果如下:

    <div class='a'> 
      <div class='c'>c</div>
      <div class='b'>b</div>
    </div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2. 使用after()和before()

    同样使用假设代码:

    $('.a').after($('.c'));
    • 1
    • 1

    效果如下:

    <div class='a'>
      <div class='b'>b</div>
    </div>
    <div class='c'>c</div>
    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4

    同样使用before()

    $('.a').before($('.c'));
    • 1
    • 1

    效果如下:

    <div class='c'>c</div>
    <div class='a'>
      <div class='b'>b</div>
    </div>
    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4
     
     
  • 相关阅读:
    DBA操作规范
    MySQL高可用之MHA
    Get MySQL这5个优化技巧,你将如虎添翼
    数据库的那些事
    Kubernetes
    nginx错误分析 `104: Connection reset by peer`
    kubernets资源预留
    kubernetes Pod亲和性
    kubernetes cpu限制参数说明
    zabbix 面板graph图上没有数据显示
  • 原文地址:https://www.cnblogs.com/robinunix/p/7531387.html
Copyright © 2011-2022 走看看