DOM外部插入insertAfter()与insertBefore()，jQuery基础(二)

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

DOM外部插入insertAfter()与insertBefore()

与内部插入处理一样，jQuery由于内容目标的位置不同，然增加了2个新的方法insertAfter与insertBefore

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面
.after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面
before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

注意事项：

insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

任务

?不会了怎么办

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

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

问答
评论
笔记
代码

全部精华我要发布

给arron这个类加了背景，为何不起作用？

已采纳回答 / 慕移动0426391

同学，得认真检查代码了，aaron与arron,两个不同，一个a一个r

1 回答 886 浏览

2019-04-25

insertAfter 与insertBefore

最新回答 / 慕仙4426018

insertBefore在目标元素前面插入集合中每个匹配的元素insertAfter 在目标元素后面插入集合中每个匹配的元素

1 回答 1104 浏览

2019-04-06

$('测试insertBefore方法增加', '多参数')

最新回答 / smallfish001

楼上正解

3 回答 1183 浏览

2019-08-07

.insertBefore( ) 为什么新加的内容没有背景颜色？新加的p标签不应该在<div class = ' aaron' 里面吗？

最新回答 / qq_鄧酀鎔_0

执行完点击事件后，p标签跟.test1是兄弟节点关系，只有.test1上有背景色，所以新加的内容没有背景颜色，你要是想让新加的内容有背景颜色，有两种方式：在.aaron上添加背景颜色在p标签上加.test1 ,eg:$('测试insertBefore方法增加', '多参数').insertBefore($(".test1")) ;

2 回答 1209 浏览

2018-08-10

$("p").append(function(n)是单个添加。

最新回答 / 小程序魔王

因为你只有一个p标签，你每次只是在这唯一的p标签里添加了一个br标签，br标签个数在增加，p标签个数还是1

2 回答 1336 浏览

2018-10-06

$("p").before(function(n)添加的原理？？

已采纳回答 / 深山老龟

就是在 p元素节点前插入段落，每次插入的段落时如果存在，则向前移动，新插入的始终保持在This is a paragraphAAA. 前面

1 回答 1408 浏览

2018-03-17

内部插入，和外部插入的区别什么啊？

最赞回答 / qq_巴黎的雨打湿东京的街_0

举一个例子：<...code...>这是一个三层嵌套的div，现在插入元素，看看你想在哪里插入，比如给第二个元素插入一个兄弟元素，用内部插入的方法：$('#div1').append('&tAfdiv id="div2_1"&app和div2是并列...

7 回答 3475 浏览

2020-01-11

当前面的元素没有位置可以前移的时候会是什么情况

已采纳回答 / 夜猫sama的小弟

没有位置就会做为第一个元素出现，你的父容器可以理解为变大，根据文档流的特性，当然要顶开与他重叠的元素，所以才会往下顶

1 回答 1043 浏览

2017-04-12

before和insertBefore有什么区别？

已采纳回答 / 随风半水

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面.after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元...

3 回答 3561 浏览

2017-06-05