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

相关阅读:
UE修改千年数据库的地址
Redis 非关系型数据库配置与优化
【python算法学习1】用递归和循环分别写下 fibonacci 斐波拉契数列，比较差异
Java之异常的详细解析
文献管理插件测试：Zotero+ChatGPT
【大模型系列】指令微调
手写Mybatis
Android 应用模块的构建
设计模式之策略模式
三相PWM整流器滞环电流控制Simulink仿真模型

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