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

相关阅读:
JAVA计算机毕业设计校园社团管理平台演示录像2021Mybatis+源码+数据库+lw文档+系统+调试部署
Vue 路由 ElementUI组件库
如何在 pyqt 中捕获并处理 Alt+F4 快捷键
【教学类-12-05】20221107《连连看横版8*4（1套模板+1套幼儿自绘）适合中班大班）（大班主题《我们的城市》)
tkinter-TinUI-xml实战（8）轻型浏览器
1.填空题进制转换Oct.2023
快速弄懂C++中的深拷贝和浅拷贝
酒店解决方案近呗科技
逆向USB设备共享：利用内网穿透让远程设备访问本地USB设备
jvm 参数配置

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