DOM外部插入after()与before()，jQuery基础(二)

第1章课程介绍
视频：1-1 jQuery基础(二)—DOM...(01:31)

DOM外部插入after()与before()

节点与节点之前有各种关系，除了父子，祖辈关系，还可以是兄弟关系。之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理，这里jQuery引入了2个方法，可以用来在匹配I的元素前后插入内容

选择器的描述：

before与after都是用来对相对选中元素外部增加相邻的兄弟节点
2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码

注意点：

after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

任务

?不会了怎么办

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')

最新回答 / 宝慕林8347766

看错，没事了

DOM外部插入

最新回答 / weixin_慕侠4503377

总结的漂亮！

多参数的两种表述有什么区别？

最新回答 / 不掉头发的伟大程序分析师

看输出效果 before添加的元素在前，after添加元素在后

$(".test1").before($('h2')) 新增内容为H2的时候，为什么会将初始的H2删除，点“after”按钮后又会将“before”按钮新增的H2删除

最新回答 / 慕慕哒6103098

如果你使用页面已有的dom的话，就只相当于搬运，而不是生成新的节点

点击button，在测试栏里没有反应

已采纳回答 / 慕婉清1043948

那个带入的jquery文件失效了，替换成http://libs.baidu.com/jquery/1.9.1/jquery.js这个就可以了

before后面不需要加$符号吗？

已采纳回答 / YulWarren

你这个代码是不用加$的，因为你加的内容不是jquery选择器，而是普通的html。希望我没有理解错～

下列代码中去掉class可以吗，为什么，不是一段文字吗

已采纳回答 / 你好西蒙

不是很理解你说的意思。 class="aaron"可以去掉，只是没了边框样式。 class="test1"不能去掉，不然后面的$(".test1")就找不到这个了

3-2 DOM外部插入after()与before()