append：在元素内部的最后面添加元素,作为子元素。

prepend：在元素内部的最前面添加元素,作为子元素。

before:在元素的前边，作为兄弟元素添加。

after:在元素的后边，作为兄弟元素添加。

举个栗子：

 <body>

     <div class="div">

         <p>我是本来就存在的</p>

     </div>

     <hr />

     <div class="base">我要给我前边加一个兄弟节点</div>

 </body>

没添加元素之前效果如下：

append:被选元素的结尾插入内容

$('.div').append('<p>我是通过append添加的</p>')

结果：可以看到已经作为子元素添加到后边了。

prepend:被选元素的开头插入内容

$('.div').prepend('<p>我是通过prepend添加的</p>')

结果：可以看到已经作为子元素添加到前边了。

after:在被选元素之后插入内容

$('.base').after("<div>我是在后边添加的兄弟节点</div>")

结果：可以看到已经作为兄弟元素添加到后边了。

before:在被选元素之前插入内容

$('.base').before("<div>我是在前边添加的兄弟节点</div>")

结果：可以看到已经作为兄弟元素添加到前边了。

jquery中添加元素append，prepend，before和after方法的区别的更多相关文章

  1. jquery中选择器的 html() text() val() attr() 方法的区别与使用方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery中的append()和prepend(),after()和before()的差别

    jQuery中的append()和preappend(),after()和before()的差别 append()和prepend() 如果 <div class='a'> //<- ...

  3. jquery中关于append()的用法笔记---append()节点移动与复制之说

    jquery中关于append()的用法笔记---append()节点移动与复制之说 今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解.于是查了查官方 ...

  4. jquery中的append功能相当于剪切的作用 将原来的元素剪切走

    jquery中的append功能相当于剪切的作用 将原来的元素剪切走

  5. JQuery中的$.getScript()、$.getJson()和$.ajax()方法

    $.getScript() 有时候,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的.虽然可以在需要哪个JavaScript文件时,动态地创建<script>标签, ...

  6. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  7. jquery中append、prepend, before和after方法的区别（一）

    原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...

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

    1.prepend() .append()方法在被选元素的开头/结尾插入文本/HTML: 2.before().after()方法在被选元素之前/之后插入内容: append() & prep ...

  9. jQuery - 添加元素append/prepend和after/before的区别

    append <p> <span class="s1">s1</span> </p> <script> $(" ...

随机推荐

  1. [例子]Ubuntu虚拟机设置固定IP上网

    宿主机器     win7 linux            Ubuntu 14.04 LTS 参考: Linux系列:Ubuntu虚拟机设置固定IP上网(配置IP.网关.DNS.防止resolv.c ...

  2. 【C++】Lambda表达式

    转自 https://www.cnblogs.com/DswCnblog/p/5629165.html 作者:dsw846 C++11的一大亮点就是引入了Lambda表达式.利用Lambda表达式,可 ...

  3. 工控随笔_02_西门子_WinCC的IO域利用C脚本返回值

    WinCC的输入输出域用来显示信息或者接受操作人员的输入.当作为显示功能时,只有直接的变量连接 才能正常的显示,如果使用动态对话框进行设置且用了表达式则不能正确显示. 但是有时候我们在WinCC变量管 ...

  4. OPPO R6007在哪里打开usb调试模式的完美流程

    当我们使用Pc接通安卓手机的时候,如果手机没有开启USB开发者调试模式,Pc则无法成功读到我们的手机,遇到此种情况我们需要想方设法将手机的USB开发者调试模式打开,以下内容我们讲解OPPO R6007 ...

  5. scrapyd和scrapyd-client使用教程

    原文地址:http://blog.wiseturtles.com/posts/scrapyd.html Tags scrapyd scrapy scrapyd-client By crazygit O ...

  6. Windows下安装Python虚拟环境

    Windows下安装Python虚拟环境 虚拟环境安装 需求概要 "虚拟环境"是从电脑独立开辟出来的环境.就好比我们生活中的橱柜中,会把酱油放在一个瓶子里,把醋放在另外一个瓶子里, ...

  7. Unity Shader Graph（三）Phase In and Out

    软件环境 Unity 2018.1.6f1 Lightweight Render Pipeline 1.1.11-preview Phase In and Out效果预览 角色沿Y轴逐渐出现和消失 S ...

  8. mybatis关于ORM的使用以及设计(一)[ORM的初始化]

    ORM WIKI中的解释.画重点 Object-relational mapping (ORM, O/RM, and O/R mapping tool) in computer science is ...

  9. OPNET下op_pk_copy()函数使用注意事项

    1)op_pk_copy()是生成新的数据包,函数op_pk_create_time_get()获取的是新数据包的生成时间.在统计数据包的端到端时延,以及服务时延需要注意. 2)此外发用数据包时使用o ...

  10. java中二维数组的排序

    首先定义一个5X8的二维数组,然后使用随机数填充满.借助Arrays的方法对二维数组进行排序.参考思路:先把二维数组使用System.arraycopy进行数组复制到一个一维数组然后使用sort进行排 ...