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. Scaffold（Material库中提供的页面脚手架）知识点

    Scaffold 包含:appBar.body.floatingActionButton

  2. 18.17 U-Boot+内核移植

    18.17.1 移植U-Boot-2012.04.08 1.下载.建立source insight工程.编译.烧写.如果无运行分析原因. $ .tar.bz2 $ cd u-boot- $ make ...

  3. 分词工具Hanlp基于感知机的中文分词框架

     结构化感知机标注框架是一套利用感知机做序列标注任务,并且应用到中文分词.词性标注与命名实体识别这三个问题的完整在线学习框架,该框架利用1个算法解决3个问题,时自治同意的系统,同时三个任务顺序渐进,构 ...

  4. ningx.conf location

    server { listen ; server_name localhost; location /dirName { alias "C:/Users/VALEB/Downloads/in ...

  5. 如何开发一款html5(H5)跨平台 k12动画/交互课件/游戏

    flash交互课件能生动表达教学内容,也深受广大教育工作者的喜爱,但是目前flash课件只能在pc电脑平台上进行展示,且目前苹果公司已经不再支持flash各类产品,也就是后续苹果ios pc系统也已经 ...

  6. Azure CosmosDB (10) Azure Cosmos DB体系结构

    <Windows Azure Platform 系列文章目录> Azure Cosmos DB的体系结构分为以下几个部分: 1.Database Accounts Database Acc ...

  7. python3-基础8

    模块与包 什么是模块 模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. #在python中,模块的使用方式都是一样的,但其实细说的话,模块可以分为四个通用类别: 1 ...

  8. JS将图片转为base64

    var getDataFromImg = function(img) { var canvas = document.createElement('canvas'); var context = ca ...

  9. 20175236 2018-2019-2 《Java程序设计》第四周学习总结

    教材学习内容总结 子类与父类 java不支持多重继承,即一个子类不可以从多个父类中同时继承,而C++中可以.人们习惯地称子类与父类的关系式“is—a”的关系. 在类的声明过程中,通过关键字extend ...

  10. Python 之 type方法创建类

    type()方法作为元类,用来创建类: type(类名, 父类的元组(针对继承的情况,可以为空),包含属性的字典(名称和值)) 以下代码可以用type()方法来创建: class Myclass(ob ...