• 技术文章 >web前端 >js教程

    jquery中append、prepend, before和after方法的区别

    巴扎黑巴扎黑2017-06-24 11:20:20原创1008


    1. append()和prepend()

    假设

    <p class='a'> //<---you want p c to append in this
      <p class='b'>b</p>
    </p>

    使用

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

    效果如下:

    <p class='a'> //<---you want p c to append in this
      <p class='b'>b</p>
      <p class='c'>c</p>
    </p>

    同样使用

    $('.a').prepend($('.c'));

    效果如下:

    <p class='a'> //<---you want p c to append in this
      <p class='c'>c</p>
      <p class='b'>b</p>
    
    </p>

    2. 使用after()和before()

    同样使用假设代码:

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

    效果如下:

    <p class='a'>
      <p class='b'>b</p></p><p class='c'>c</p>

    同样使用before()

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

    效果如下:

    <p class='c'>c</p><p class='a'>
      <p class='b'>b</p></p>

    总结:

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

    1. append()和prepend()

    假设

    <p class='a'> //<---you want p c to append in this
      <p class='b'>b</p>
    </p>

    使用

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

    效果如下:

    <p class='a'> //<---you want p c to append in this
      <p class='b'>b</p>
      <p class='c'>c</p>
    </p>

    同样使用

    $('.a').prepend($('.c'));

    效果如下:

    <p class='a'> //<---you want p c to append in this
      <p class='c'>c</p>
      <p class='b'>b</p>
    
    </p>

    2. 使用after()和before()

    同样使用假设代码:

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

    效果如下:

    <p class='a'>
      <p class='b'>b</p></p><p class='c'>c</p>

    同样使用before()

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

    效果如下:

    <p class='c'>c</p><p class='a'>
      <p class='b'>b</p></p>

    总结:

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

    以上就是jquery中append、prepend, before和after方法的区别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:jQuery.append() 函数详解 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 一文聊聊Node.js中的cluster(集群)• 简单了解JavaScript闭包• 抖音很火的图片选择题特效,用前端快速实现!• 一文详解Node中express的身份认证• 一文聊聊node后端路由自动加载
    1/1

    PHP中文网