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. 路径规划(1)--连接GPS接收端

    从淘宝上入手的GPS接收端U-BLOX M8N,带UART串口连接线. 一.打开树莓派上的UART串口通信 1.下载pi3-miniuart-bt-overlay.dtb,并将dtb文件拷贝到/boo ...

  2. request&response

    /* request&response 1.什么是HttpServletRequest HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP ...

  3. Azure CosmosDB (6) 冲突类型和解决策略

    <Windows Azure Platform 系列文章目录> 当我们为CosmosDB配置多个Azure Region写入,就需要考虑冲突类型和解决策略. 对于配置了多个写入区域的 Az ...

  4. c# listview数据预览（转载的放在这里备用）

    public class PrintListView : ListView { /// <summary> /// 指示是否进行打印预览,默认值为 true /// </summar ...

  5. 菲律宾Globe/TM卡最省钱的上网方案

    基本技能点 1:发送SURFALERT ON到8080,这样就关掉了余额扣费的上网方式,防止因为套餐耗尽后疯狂扣话费. 2:用Coins.ph充个15Pisos(也就2元人民币),或则充多点钱都可以. ...

  6. Java中的“==操作符”和equals方法有什么区别

    Java中的"=="和equals方法究竟有什么区别? 1.==操作符 "=="操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的 ...

  7. 软件测试：3.Exercise Section 2.3

    软件测试:3.Exercise Section 2.3 /************************************************************ * Finds an ...

  8. rabbit原理及项目应用

    1.rabbitMQ是什么? mq是由erlang语言开发的开源的amqp的实现. 2.rabbitMQ的基本原理是什么? 使用RabbitMQ,首先需要与rabbitMQ的visiu host建立连 ...

  9. Halcon 17与 c# 混合编程

    这篇主要是C#和Halcon的混合编程,在此基础上对按键不同功能的划分,以及图片适应窗口和从本地打开图片. halcon源程序:   dev_open_window(0, 0, 512, 512, ' ...

  10. egret编译 FATAL ERROR: CALL_AND_RETRY_0 Allocation failed process out of memory解决

    egret 白鹭编译时异常提示: FATAL ERROR: CALL_AND_RETRY_0 Allocation failed process out of memory.  编译时内存溢出, 因为 ...