在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个。

根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近。同时他们又都有添加元素的作用,容易混淆。

要想搞清楚他们之间的区别。

首先我们要明白这几个函数各自的作用。

一.append()和prepend()的作用

append()用于在被选元素的结尾插入元素。

prepend()用于在被选元素的开头插入元素。

重点在于黑体字——被选元素的,

也就是说这两个函数的添加都是添加到元素的内部的。

demo1:

看下面的HTML代码

<div id="test">
<p>a</p>
</div>

使用 append( ) 和 prepend( )添加元素

$(document).ready(function(){
$("#test").append("<p>b</p>") //使用append()添加 b 段落
$("#test").prepend("<p>c</p>") //使用 prepend()添加 c 段落
})

效果如下

<div id="test">
<p>c</p>
<p>a</p>
<p>b</p>
</div>

demo2:

<ul id="test"> <li>a</li> </ul>

<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>

<script>

$(function(){

$('#test').append('<li> b</li>');

$('#test').prepend('<li> c</li>');

})

</script>

显示如下:

demo3

<p id="test">a</p>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
<script>
$(function(){
$('#test').append('b');
$('#test').prepend('c');
})
</script>

显示样式如下:

从上面可以得知,当我们使用 append() 和 prepend()往 id 为 test 的 div 块添加元素时,是添加到 div 内部的。往p的内部添加内容,是直接加到p的内容的里面的

也就是说,我们添加的元素,成为了 被添加元素 的 子元素,或者是被添加元素的内容。

二. after() 和 before() 的作用

after()用于在被选元素之后插入内容。

before()用于在被选元素之前插入内容。

重点在于黑体字元素之前 ,元素之后。

这意味着这两个函数是往元素外部的前后添加的。

还是刚刚的HTML代码

<div id="test">
<p>a</p>
</div>

使用 after() 和 before()添加元素。

$(document).ready(function(){
$("#test").after("<p>b</p>")
$("#test").before("<p>c</p>")
})

结果如下

<p>c</p>
<div id="test">
<p>a</p>
</div>
<p>b</p>

从结果可知,after( ) 和 before( ) 往 id=”test“ 的 div块添加元素时,是添加到块外部的。

也就是说,添加的元素,成为了 被添加元素的 兄弟元素。

demo2如下:

<p id="test">a</p>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
<script>
$(function(){
$('#test').before('b');
$('#test').after('c');
})
</script>

样式如下:

三.区别和总结

通过上面两个例子,我们可以清楚的看到四个函数 append 和 prepend 与 after和before 的区别。

只要明白 往元素内的前后添加 和 往元素外的前后添加 的区别,就很容易区分了。

(转)jQuery中append(),prepend()与after(),before()的区别的更多相关文章

  1. jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

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

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

  3. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  4. jquery中append、prepend, before和after方法的区别(一)

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

  5. jQuery中append()与appendto()用法分析

    本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同 ...

  6. jQuery中四种事件监听的区别

    原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...

  7. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  8. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

  9. [转载]jQuery中的html,val,text区别

    在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...

随机推荐

  1. HZOI20190903模拟36 字符,蛋糕,游戏

    题面:https://www.cnblogs.com/Juve/articles/11461528.html A:字符 暴力模拟一下,细节很多,但是暴力思路都不大一样 先枚举循环节长度,然后处理一个b ...

  2. svn里update以后还是有红色的感叹号怎么办

    不用那么麻烦,直接还原就行了,客户端是TortoiseSVN的话,在该文件或文件夹上点右键,选择TortoiseSVN——revert有时还原之后系统反应没那么快,还是显示红色感叹号,刷新几下就正常了 ...

  3. 2018-10-20-C#-从零开始写-SharpDx-应用-初始化dx修改颜色

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 初始化dx修改颜色 lindexi 2018-10-20 17:34:37 +0 ...

  4. Liferay 7:Liferay DXP全套教程内附源码

    分享是美德 都是英文教程,有不明白的问题可以随时咨询我. http://www.javasavvy.com/liferay-7-hooks-tutorials/

  5. 时序数据库连载系列: 时序数据库一哥InfluxDB之存储机制解析

    InfluxDB 的存储机制解析 本文介绍了InfluxDB对于时序数据的存储/索引的设计.由于InfluxDB的集群版已在0.12版就不再开源,因此如无特殊说明,本文的介绍对象都是指 InfluxD ...

  6. sql 分页rownumber方式

    alter procedure [dbo].[proc_getpaging] ( ), --表名(可以为多表) ) = '*', --字段名(全部字段为*) ), --排序字段(支持多字段不用加ord ...

  7. TZ_05_Spring_事物的xml开发和annotation开发

    1.Spring_事物的xml开发 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=& ...

  8. Java问题解读系列之IO相关---Java深拷贝和浅拷贝

    前几天和棒棒童鞋讨论Java(TA学的是C++)的时候,他提到一个浅拷贝和深拷贝的问题,当时的我一脸懵圈,感觉自己学Java居然不知道这个知识点,于是今天研究了一番Java中的浅拷贝和深拷贝,下面来做 ...

  9. java-面向对象-封装-this-构造函数

    概要图 一 构造函数 需求:为了描述事物更准确,发现事物对应的很多对象一创建时, 就有了,一些初始化的数据.在类中该如何完成的.   通过Java中的另一个小技术完成:就是构造函数.对象本身就是构造出 ...

  10. Oracle中with as用法

    with as 相当于虚拟视图. 例子:需求描述 按照x列分组后统计y列的总值,最终目标是选出比y列总值的三分之一大的那些分组统计信息   使用子查询方式实现最容易想到的方法 SELECT x, SU ...