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. Python之 Virtualenv简明教程

    virtualenv通过创建独立Python开发环境的工具, 来解决依赖.版本以及间接权限 问题. 比如一个项目依赖Django1.3 而当前全局开发环境为Django1.7, 版本跨度过大, 导致不 ...

  2. Flask之 安装与HelloWorld

    安装Flask 首先我们来安装Flask.最简单的办法就是使用pip. pip install flask 然后打开一个Python文件(app.py),输入下面的内容并运行该文件.然后访问local ...

  3. 【原创】Bug管理操作规范个人经验总结

    1. 禅道简介 禅道是一个基于“敏捷开发”模式的软件开发全生命周期管理软件,在国内的软件开发公司里占据最大的份额,从大公司到小公司,都能适用. 笔者使用禅道多年,根据自己的经验总结了一套Bug管理的方 ...

  4. 多线程shell脚本检测主机存活

    局域网中分了很多网段,而IP地址使用情况也未知,前期也没有规划和记录,当新的主机需要使用固定IP的时候,能否第一时间知道哪个IP空闲就显得很重要了,如果一个一个去ping的话太浪费时间. 这里分享一个 ...

  5. vs2015 无法连接到已配置的开发web服务器

    问题一:vs2015 无法连接到已配置的开发web服务器 最靠谱方法如下:(和防火墙开启无关联, 注册表增加什么键值无关联 , 缺失asp.net core.Dll文件无关联 ) 分析,因为前提是你的 ...

  6. Oauth2手册 第一章

    来源:https://github.com/jeansfish/RFC6749.zh-cn/blob/master/SUMMARY.md 1. 简介在传统的客户端-服务器身份验证模式中,客户端请求服务 ...

  7. 在DataFrame数据表里面提取需要的行

    在DataFrame数据表里面提取需要的行 代码功能: 在DataFrame表格中使用loc(),得到我们想要的行,然后根据某一列元素的值进行排序 此代码中还展示了为DataFrame添加列,即直接n ...

  8. securecrt 方向键乱码解决

    1 下载安装包rlwrap: rlwrap-0.30.tar.gz     http://utopia.knoware.nl/~hlub/uck/rlwrap/   2  install rlwrap ...

  9. webRTC中音频相关的netEQ（一）：概述

    上篇文章(语音通信中终端上的时延(latency)及减小方法)说从本篇开始会切入webRTC中的netEQ主题,netEQ是webRTC中音频技术方面的两大核心技术之一(另一核心技术是音频的前后处理, ...

  10. C#控制台下测试多线程的源码

    下边代码是关于C#控制台下测试多线程的的代码,应该是对小伙伴有所用. class Program { static void Main(string[] args) { ThreadStart num ...