jQuery的append()，prepend(),appendTo和prependTo()的不同

最新推荐文章于 2022-06-08 14:57:17 发布

Zayn17

最新推荐文章于 2022-06-08 14:57:17 发布

阅读量365

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43867927/article/details/102005859

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

append()，prepend(),appendTo和prependTo()都是往被被选元素中插入内容，但是他们之间存在差异。

一、append()与prepend()

append()的语法：
1. $(selector).append(content)
2. $(selector).append(function(index,html))
prepend()的语法:
1. $(selector).prepend(content)
2. $(selector).prepend(function(index,html))

相同点：
1.添加的内容相同，可以是

HTML 元素
jQuery 对象
DOM 元素

2.可以使用函数来附加内容

不同点：
append将元素添加在被选元素的尾部，而prepend将元素添加在被选元素的头部

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>我是中间的</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    var $h4 = $('<h4>我是第一个</h4>');
    $("div").prepend($h4);
    $("div").append(function () {
        return '<h5>我是最后一个</h5>';
    });
</script>
</body>
</html>

效果：
!入图片描述](https://img-blog.csdnimg.cn/2019100318090128.png)

二、append()与appendTo()

append()的语法：
1. $(selector).append(content)
2. $(selector).append(function(index,html))

appendTo()的语法：
$(content).appendTo(selector)

相同点：
添加内容的位置都在被选元素的尾部

不同点：
1. 语法上，选择器的位置。append的选择器位于前面，appendTo的选择器位于后面
2. 添加的内容。appendTo不能通过函数来附加内容。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>我是中间的</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    var $h4 = $('<h4>我是通过append添加</h4>');
    $("div").append($h4);
    var $h5 = $('<h5>我是通过appendTo添加</h5>');
    $($h5).appendTo("div");
</script>
</body>
</html>

效果：
在这里插入图片描述

三、prepend()与prependTo()

prepend()与prependTo() 和 append()与appendTo() 类似

append()的语法：
1. $(selector).prepend(content)
2. $(selector).prepend(function(index,html))

appendTo()的语法：
$(content).prependTo(selector)

相同点：
添加内容的位置都在被选元素的尾部

不同点：
1. 语法上，选择器的位置。prepend的选择器位于前面，prependTo的选择器位于后面
2. 添加的内容。prependTo不能通过函数来附加内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>我是中间的</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    var $h4 = $('<h4>我是通过prepend添加</h4>');
    $("div").prepend($h4);
    var $h5 = $('<h5>我是通过prependTo添加</h5>');
    $($h5).prependTo("div");
</script>
</body>
</html>

效果：
在这里插入图片描述

Zayn17

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的append()，prepend(),appendTo和prependTo()的不同

一、append()与prepend()的不同二、append()与appendTo()的不同三、prepend()与prependTo()的不同
复制链接

扫一扫