DOM常用外部插入方法与区别
1.DOM外部插入after()与before()
节点与节点之前有各种关系，除了父子，祖辈关系，还可以是兄弟关系。之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容。
| 选择器 | 描述 |
| .after(content) |
在匹配选择器的每个元素之后插入内容（作为兄弟节点） |
| .before(content) |
方法在匹配选择器的元素之前插入内容（作为兄弟节点） |
before与after都是用来对相对选中元素外部增加相邻的兄弟节点 2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面 2个方法都支持多个参数传递after(div1,div2,....)
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.aaron{
border: 1px solid red;
}
</style>
</head> <body>
<h2>通过before与after添加元素</h2>
<button id="bt1">点击通过jQuery的before添加元素</button>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="aaron">
<p class="test1">测试before</p>
</div>
<div class="aaron">
<p class="test2">测试after</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>') })
</script>
</body>
注意点：
- after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
- before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插
2.DOM外部插入insertAfter()与insertBefore()
与内部插入处理一样，jQuery由于内容目标的位置不同，然增加了2个新的方法insertAfter与insertBefore
| 选择器 | 描述 |
insertAfter() |
把元素插入到所有匹配的元素的后面 |
insertBefore() |
把元素插入到所有匹配的元素的后面 |
- .before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面
- .after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。 对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面
- before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.test1 {
background: #bbffaa;
} .test2 {
background: yellow;
}
</style>
</head> <body>
<h2>通过insertBefore与insertAfter添加元素</h2>
<button id="bt1">点击通过jQuery的insertBefore添加元素</button>
<button id="bt2">点击通过jQuery的insertAfter添加元素</button>
<div class="aaron">
<p class="test1">测试insertBefore,不支持多参数</p>
</div>
<div class="aaron">
<p class="test2">测试insertAfter,不支持多参数</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在test1元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在test2元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
})
</script>
</body> </html>
注意事项：
- insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
- insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；
DOM常用外部插入方法与区别的更多相关文章
- SVG DOM常用属性和方法介绍(1)
12.2 SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...
- SVG DOM常用属性和方法介绍
将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2 ...
- Sqlite3常用的插入方法及性能测试
最近做到的项目涉及一个大数据量缓存重传,其中要用到的sqlite技术,把自己的学习心得整理了一下. SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中. ...
- Html DOM 常用属性和方法
Node对象的节点类型***************************************************接口 nodeType常量 nodeType值 备注Element Node ...
- DOM常用的属性和方法
之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...
- DOM的内部插入和外部插入
/*****************返回值都是最前面调用这个方法的元素 ***************** */ //这是外部插入 $("div").insertBefore($( ...
- jquery常用的一些方法
一.选择网页元素(标签选择器) $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myCla ...
- javascript 原生常用api 数组方法大全
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery修炼心得-DOM节点的插入
1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...
随机推荐
- FineReport破解心得
注:写文档目的主要用于技术学习,了解技术帆软公司技术大牛是怎么设计系统,请勿用于商用. 一. 工具准备 1. javassist:class代码修改工具 2. ...
- dot watch+vs code提成asp.net core开发效率
在园子中,已经又前辈介绍过dotnet watch的用法,但是是基于asp.net core 1.0的较老版本来讲解的,在asp.net core 2.0的今天,部分用法已经不太一样,所以就再写一篇文 ...
- Java注解学习笔记
我们平常写Java代码,对其中的注解并不是很陌生,比如说写继承关系的时候经常用到@Override来修饰方法.但是@Override是用来做什么的,为什么写继承方法的时候要加上它,不加行不行.如果对J ...
- postman简单教程-环境变量，全局变量的设置及作用
讲postman环境变量设置之前,先讲一个小插曲,环境变量.全局变量的区别在于Globals,只能用一组,而Environmen可以设置多组,所以我更喜欢设置环境变量 1.环境变量-Environme ...
- [poj3904]Sky Code_状态压缩_容斥原理
Sky Code poj-3904 题目大意:给你n个数,问能选出多少满足题意的组数. 注释:如果一个组数满足题意当且仅当这个组中有且只有4个数,且这4个数的最大公约数是1,$1\le n\le 10 ...
- redis 相关知识
1. 什么是Redis Redis是由意大利人Salvatore Sanfilippo(网名:antirez)开发的一款内存高速缓存数据库.Redis全称为:Remote Dictionary Ser ...
- 基于php编写的新闻类爬虫，插入WordPress数据库
这个爬虫写的比较久远,很久没有更新博客了. 1.首先思路是:通过php的curl_setopt()函数可以方便快捷的抓取网页. 2.什么样的新闻吸引人呢,当然的热点新闻了.这里选百度的搜索风云榜,获取 ...
- oracle 常用sql字符函数介绍
常用字符函数介绍 1.ascii 返回与指定的字符对应的十进制数: SQL>select ascii('A') A,ascii('a') a,ascii('0') zero,ascii(' ') ...
- 团队作业7——第二次项目冲刺（Beta版本12.05-12.07）
1.当天站立式会议照片 本次会议内容:1:每个人汇报自己完成的工作.2:组长分配各自要完成的任务. 2.每个人的工作 黄进勇:项目整合,后台代码. 李勇:前台界面优化. 何忠鹏:数据库模块. 郑希彬: ...
- pandas 使用
ss = [['xx','m',22],['cc','w',33],['jj','w',44],['qq','m',11]] import pandas as pd df = pd.DataFrame ...