jQuery append和prepend和appendTo的区别和用法

🔍append: 父元素内部末尾处插入内容
🔍prepend: 父元素内部开头处插入内容
🔍appendTo: 子元素内容插入到父元素内部的末尾(写法和append不同,但是作用相同)

🥳具体使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        span {
            color: yellow;
        }
    </style>
    <title>Document</title>
</head>
<body>

    <button id="btn1">父元素内部末尾处插入内容</button><br>
    <button id="btn2">父元素内部开头处插入内容</button>
	
	<!-- 容器div -->
    <div id="container">

    </div>
    <!-- 模板1 -->
    <template id="clone-content-last">
        <span>末尾处1</span>
        <span>末尾处2</span>
        <span>末尾处3</span>
    </template>
    <!-- 模板2 -->
    <template id="clone-content-start">
        <span>开头处1</span>
        <span>开头处2</span>
        <span>开头处3</span>
    </template>
</body>
<script src="./js/jquery.min.js"></script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

$('#btn1').click(() => {

    // ⏹原生js的方式导入模板内容
    const cloneTemplate = document.importNode(document.querySelector('#clone-content-last').content, true);
    // ⏹父元素内部末尾处插入内容
    $("#container").append(cloneTemplate);

    // 🔍创建一个li元素
    const tempLiElement = $('<li></li>');
    // 🔍想li元素内部的结尾处插入span标签
    tempLiElement.append('<span>li元素内部的span标签</span>');
    // 🔍将li元素插入到父元素的内部的结尾处
    tempLiElement.appendTo($("#container"));
});

$('#btn2').click(() => {
    // 👌直接获取模板内部的html
    const cloneTemplate = $('#clone-content-start').html();
    // 👌父元素内部开头处插入内容
    $("#container").prepend(cloneTemplate);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

相关阅读:
出海季，互联网出海锦囊之本地化
物联网开发笔记（10）- 使用Wokwi仿真micropython on ESP32开发板实现音乐播放
java毕业设计恩施茶多芬网店系统设计与实现2021Mybatis+系统+数据库+调试部署
vue3ref和reactive
Redis(哈希Hash和发布订阅模式)
90.STL-谓词的使用
jupyter notebook中查看python版本的解决方案
项目上线，git 给分支打 tag(git tag)
haskell的列表推导中的基本概念和其他列表功能head/tail/take/drop
vue3+Element-plus el-select 下拉选择多选增加全选封装组件

原文地址：https://blog.csdn.net/feyehong/article/details/125509373