(转)jQuery中append(),prepend()与after(),before()的区别
在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()的区别的更多相关文章
- jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...
- jQuery - 添加元素append/prepend和after/before的区别
append <p> <span class="s1">s1</span> </p> <script> $(" ...
- jquery中append跟prepend的用法
jquery中append和prepend的用法 append 是插入到元素中,并放到元素内的最后面prepend 是插入到元素中,并放到元素内的最前面例$("body"). ...
- jquery中append、prepend, before和after方法的区别(一)
原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...
- jQuery中append()与appendto()用法分析
本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同 ...
- jQuery中四种事件监听的区别
原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...
- jquery中,size()和length()方法有啥区别
jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...
- jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
- [转载]jQuery中的html,val,text区别
在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...
随机推荐
- Codeigniter 数据库操作事务情况下获取不到last_insert_id()
开发中,数据库Insert使用了事务,如果 $this->db->insert_id() 放在 $this->db->trans_complete(); 这句语句之后,$thi ...
- odoo xml 时间搜索条件
今年 <filter string="This Year" name="year" domain="[('date','<=', time ...
- html常用标签详解4-列表标签
列表标签 列表标签分为3大类:无序列表.有序列表.自定义列表.线面我会依依简单介绍 一.无序列表 有个type属性: 默认:disc:实心小圆点:circle:空心小圆点:square:实心小方块:n ...
- angular路由配置以及使用
一.生成路由文件 按照惯例,有一个独立模块来配置相关路由,这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中. 使用CLI生成 ...
- 洛谷 P3750 [六省联考2017]分手是祝愿
传送门 题解 //Achen #include<algorithm> #include<iostream> #include<cstring> #include&l ...
- 深入浅出 Java Concurrency (2): 原子操作 part 1[转]
从相对简单的Atomic入手(java.util.concurrent是基于Queue的并发包,而Queue,很多情况下使用到了Atomic操作,因此首先从这里开始).很多情况下我们只是需要一个简单的 ...
- mysql中的字符集和校对规则(mysql校对集)
1.简要说明介绍 字符集和校对规则 字符集是一套符号和编码.校对规则是在字符集内用于比较字符的一套规则. MySql在collation提供较强的支持,oracel在这方面没查到相应的资料. 不同字符 ...
- LINUX查询登录主机的用户工具:w 、who 、users
w.who和users工具,是查询已登录当前主机的用户:另外finger -s 也同样能查询:侧重点不一样:请自己对比着看:毕竟简单,这里只是介绍 : [beinan@localhost ~]$ w ...
- Spring Cloud Alibaba迁移指南(一):一行代码从 Hystrix 迁移到 Sentinel
摘要: 本文对Hystrix.Resilience4j.Sentinel进行对比,并探讨如何使用一行代码这种极简的方式,将Hystrix迁移到Sentinel. Hystrix 自从前段时间 宣布停止 ...
- [原创]iFPGA-Cable FT2232H Xilinx / Altera / Lattice 三合一JTAG & UART调试器-详细使用说明
iFPGA-Cable调试器使用说明 全文分为6部分: 第0部分:实物.连线及其驱动安装说明 第1部分:Xilinx JTAG 第2部分:UART 第3部分:Altera JTAG 第4部分:Latt ...