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

相关阅读:
Node.js单点登录SSO详解：Session、JWT、CORS让登录更简单
支付宝支付&内网穿透
上海00后985毕业女生月薪1.2w，想找年薪40万程序员，网友表示很不理解
刷题记录:牛客NC16746神奇盘子
日均数亿推送稳定性监控实践｜得物技术
vue watch监听
奥拉帕尼人血清白蛋白HSA纳米粒|陶扎色替卵清白蛋白OVA纳米粒|来他替尼小鼠血清白蛋白MSA纳米粒（试剂）
845. 数组中的最长山脉
【JDBC】----综合案例（账号密码登录和SQL注入）
微服务框架 SpringCloud微服务架构 3 Eureka 3.1 提供者与消费者

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