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

相关阅读:
第3.5章：StarRocks数据导入——Broker Load
具体型号的CPU与GPU/CUDA计算能力实测记录
ChatGPT研究论文提示词集合1-【主题选择与问题研究、文献综述】
【强化学习论文合集】AAAI-2022 强化学习论文 | 2022年合集（二）
web：[极客大挑战 2019]LoveSQL
windows查看登陆的IP
C语言洛谷题目分享（10）最厉害的学生和明明的随机数
Arduino UNO通过SPI串行方式驱动LCD12864液晶屏
jeecg-boot中上传图片到华为云obs云存储中
【Make YOLO Great Again】YOLOv1-v7全系列大解析（Tricks篇）

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