jquery中append、prepend, before和after方法的区别(一)
原文:http://blog.csdn.net/woosido123/article/details/64439490
在 jquery中append() 与 prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() 与before()是在元素的外面插入内容(其内容变成元素的兄弟节点)。
1. append()和prepend()
<div class='a'>
<div class='b'>b</div>
</div>
- 1
- 2
- 3
- 1
- 2
- 3
使用
$('.a').append($('.c'));
- 1
- 1
效果如下:
<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
<div class='c'>c</div>
</div>
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
同样使用
$('.a').prepend($('.c'));
- 1
- 2
- 1
- 2
效果如下:
<div class='a'>
<div class='c'>c</div>
<div class='b'>b</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
2. 使用after()和before()
同样使用假设代码:
$('.a').after($('.c'));
- 1
- 1
效果如下:
<div class='a'>
<div class='b'>b</div>
</div>
<div class='c'>c</div>
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
同样使用before()
$('.a').before($('.c'));
- 1
- 1
效果如下:
<div class='c'>c</div>
<div class='a'>
<div class='b'>b</div>
</div>
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
)H[YGJ69S5SCH5%60OHPZU.jpg)
jquery中append、prepend, before和after方法的区别(一)的更多相关文章
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- jQuery中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()与appendto()用法分析
本文实例分析了jquery中append()与appendto()的用法.分享给大家供大家参考.具体分析如下: 在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同 ...
- Jquery中each的三种遍历方法
Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- jquery中获取iframe的id的方法:
jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...
随机推荐
- Spark 集群环境搭建
思路: ①先在主机s0上安装Scala和Spark,然后复制到其它两台主机s1.s2 ②分别配置三台主机环境变量,并使用source命令使之立即生效 主机映射信息如下: 192.168.32.100 ...
- 用户输入和while循环
函数input()的工作原理 message=input('Tell me something,and I will repeat it back to you:') print(message) 编 ...
- centos7中文显示为小方块~~啊啊啊 求大佬们解答
这个问题困扰我很久了,刚好前几天注册了博客园,就想问问大佬们是怎么解决中文显示小方块的? 我试了很多办法,包括但不限于修改i18n配置文件,locale.conf,添加中文字体库等等等... 但都没有 ...
- Dojo的on函数(以前的dojo.connect)
同jQuery的on函数: require(["esri/map", "dojo/on"], function(Map, on) { // ... on(my ...
- mina架构在JT/T808协议应用程序中的应用
Apache Mina Server 是一个网络通信应用框架,也就是说,它主要是对基于TCP/IP.UDP/IP协议栈的通信框架(当然,也可以提供JAVA 对象的序列化服务.虚拟机管道通信服务等),M ...
- 2018 noip 提高组初赛参考答案
这里有pdf文件:戳这儿
- 【点分治】luoguP2664 树上游戏
应该是一道中等难度的点分?麻烦在一些细节. 题目描述 lrb有一棵树,树的每个节点有个颜色.给一个长度为n的颜色序列,定义s(i,j) 为i 到j 的颜色数量.以及 现在他想让你求出所有的sum[i] ...
- [LUOGU]P1508 Likecloud-吃、吃、吃
题目背景 问世间,青春期为何物? 答曰:"甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!" 题目描述 正处在某一特定时期之中的李大水牛由于消化系统比较发达,最近一直处在饥饿的状态中.某日 ...
- Ubuntu 18.04安装显卡驱动
安装完双系统,我遇到好几次开机或关机有问题,导致我重装了3次系统,第三次我才知道是显卡驱动问题,Ubuntu预装的开源Nvidia驱动太烂了,需要换官方驱动. 把 nouveau 驱动加入黑名单 $s ...
- Linux菜鸟起飞之路【七】文件合并、归档和压缩
一.文件合并操作 1.覆盖符号与追加符号 a)“>”代表将左边文件的内容覆盖右边文件的内容,如果右边文件不存在则创建这个文件 b)“>>”代表将左边文件的内容追加到右边文件中,如果右 ...