DOM内部插入prepend()与prependTo()，jQuery基础(二)

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

DOM内部插入prepend()与prependTo()

在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo

选择器的描述：

通过右边代码可以看到prepend与prependTo的使用及区别：

.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
.prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同
对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数
而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

这里总结下内部操作四个方法的区别：

append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中

任务

?不会了怎么办

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

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

问答
评论
笔记
代码

全部精华我要发布

JQ 好难理解哦专业术语真心看起来费劲服了

已采纳回答 / MrThinco

这位兄台，我建议您先去看看《JavaScript》基础课程，然后再来学习《jquery》课程，您会觉得“妈呀，jquery果然，简单粗暴，好用易懂”。因为原生的JavaScript语法和逻辑不大利于编程和使用（当然，原生JavaScript还是要学习，这样利于你更好的理解jquery，而且有些东西没法用jquery实现的可以用原生的JavaScript来搞），jquery是JavaScript的一个轻量级的框架（库），使得JavaScript变得更加的利于开发。简单讲就是“jquery，写的更少，做的更多...

2 回答 1387 浏览

2019-11-08

为什么在prependTo那里只能显示一个p标签的内容

最新回答 / weixin_慕勒2266735

这样写是可以的，亲测有效：$('<p>prependTo增加的p元素</p><p>prependTo增加的p元素111</p>') .prependTo($('.aaron2'))

2 回答 1278 浏览

2019-02-21

appendTo()、prependTo()这种反向插入的必要用途又在哪里呢？

最新回答 / 慕神7088389

a.appendto(b),b.append（a）。返回的元素不一样，第一种方法返回a元素，第二种方法返回b元素。可以根据需要，选择到底使用哪一种方法。

3 回答 2246 浏览

2018-06-13

在.append()和.appendTo()中，传入的子元素都可以多元素传入；那么prepend()与prependTo()是否也可以子元素多元素传入？

+ 我来回答回答最高可+2积分

3 回答 1697 浏览

2022-07-18

prepend()与prependTo()和before() 有什么区别

已采纳回答 / 秦假仙

before()是外部插入，插入到目标节点的前面作为兄弟节点；prepend和prependto是内部插入，插入到内部的第一个子元素位置；

2 回答 1345 浏览

2020-09-23

prependTo的问题

最新回答 / 青黄不一

因为这个开头是$()来创建节点的，所以$()内部直接是html结构就好了，不用加上',' 即$('<p>prependTo增加的p元素1`</p><p>123</p>')就可以了

4 回答 934 浏览

2017-06-08

为什么运行部了

最新回答 / gaoboss

将代码中的javascript地址改为下面的链接就可以了： <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

1 回答 575 浏览

2017-01-16

代码里面引用的sina的js库有问题，换成baidu的就好了。

最新回答 / NadiaSmile

哦~~~

1 回答 458 浏览

2017-01-05

prependTo('.aaron2')和prependTo($('.aaron2'))的区别？

已采纳回答 / 篱落

jQueryObject.prependTo(selector)其中selector:可以是String/Element/jQuery类型；如果参数selector为字符串类型，则将其视作jQuery选择器或html内容字符串，jQuery会自行判断。这里prependTo('.aaron2')中selector为字符串类型，jQuery会默认为jQuery选择器，会自行查找$('.aaron2')，所有和prependTo($('.aaron2'))效果一样

2 回答 901 浏览

2018-10-28

这段代码哪里错了为什么prependTo（）点击没反映？

已采纳回答 / Alexey

2 回答 857 浏览

2018-10-28

DOM篇的例子运行不了

已采纳回答 / Sunny_myj

修改下jQuery的引入，改成<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>就可以正常运行了

2 回答 734 浏览

2016-12-02