猴子也能学会的jQuery第十期——jQuery元素操作（下）

📚系列文章—目录🔥

猴子也能学会的jQuery第一期——什么是jQuery

猴子也能学会的jQuery第二期——引用jQuery

猴子也能学会的jQuery第三期——使用jQuery

猴子也能学会的jQuery第四期——jQuery选择器大全

猴子也能学会的jQuery第五期——jQuery样式操作

猴子也能学会的jQuery第六期——jQuery事件（上）

猴子也能学会的jQuery第六期——jQuery事件（中）

未完待续

文章目录

📚系列文章—目录🔥

📌回顾上期

🎯jQuery元素操作

🧩添加元素

🔗内部添加

🔗外部添加

🧩删除元素

1️⃣empty()方法

2️⃣remove()方法

📌回顾上期

上期讲了jQuery元素操作的内容，分为上下两部分，上一期讲了遍历元素和创建元素的内容。

🎯jQuery元素操作

元素操作主要是通过jQuery提供的一系列方法，实现遍历、创建、添加和删除操作。

🧩添加元素

jQuery提供了添加元素的方法，用来为目标元素添加某个元素。添加的方式有两种，分别是内部添加和外部添加。

🔗内部添加

内部添加的方式可以实现在元素内部添加元素，并且可以放到内部的最后面或者最前面。内部添加主要通过append()和prepend()方法来实现，下面通过代码进行演示。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ajax study</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<style>
</style>

<body>
    <ul>
        <li>提前创建好的li</li>
    </ul>
</body>
<script>
    $(function () {
        var li_1 = $("<li>我是append添加的li</li>"); // 创建元素1
        var li_2 = $("<li>我是prepend添加的li</li>"); // 创建元素2
        $("ul").append(li_1);    // 内部添加并且放到内部的最后面
        $("ul").prepend(li_2);    // 内部添加并且放到内部的最前面
    });
</script>
</html>
上述代码中，通过$("ul")获取到页面中的ul元素，并调用append(li)将li元素添加到ul中。append()是把元素添加到匹配元素内部的最后面，而prepend()是把元素添加到匹配元素内部的最前面。

🔗外部添加

外部添加就是把元素放入目标元素的后面或者前面，通过after()和before()方法来实现。下面通过代码进行演示。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ajax study</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<style>
    div {
        font-weight: bold;
    }
</style>

<body>
    <div class="box1">原始div</div>
</body>
<script>
    $(function () {
        var div_1 = $("<div>我是before添加的div</div>"); // 创建元素2
        var div_2 = $("<div>我是after添加的div</div>"); // 创建元素1
        $(".box1").before(div_1);    // 内部添加并且放到内部的最前面
        $(".box1").after(div_2);    // 内部添加并且放到内部的最后面
    });
</script>
</html>
上述代码中，在类名为“box1”的元素后面和前面分别插入div元素。其中after()表示在目标元素的后面插入div元素，而before()表示在目标元素的前面插入div元素。

🧩删除元素

删除元素分为删除匹配的元素本身、删除匹配的元素里面的子节点两种情况，用到的方法如下表所示。

语法说明
empty() 从被选元素中删除子元素，但不删除元素本身
remove([expr]) 清空元素的内容，并删除元素本身（可选参数expr用于筛选元素，该参数可以是任何 jQuery 选择器的语法。）
下面通过代码进行演示jQuery中节点删除的操作。

1️⃣empty()方法
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ajax study</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<style>
    ul {
        background-color: yellow;
        height: 60px;
    }
</style>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button>点击删除</button>
</body>
<script>
    $("button").click(function () {
        $("ul").empty();
        console.log($("ul").html());  
    });
</script>

</html>
2️⃣remove()方法
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ajax study</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<style>
    ul {
        background-color: yellow;
        height: 60px;
    }
</style>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button>点击删除</button>
</body>
<script>
    $("button").click(function () {
        $("ul").remove();
        console.log($("ul").html());  
    });
</script>

</html>
上述代码中，empty()方法仅能删除匹配元素的文本内容，而元素节点依然存在；remove()方法则可以同时删除匹配元素本身和文本内容。因此，在开发时要根据实际的需求，选择合适的方法进行元素删除操作。
补充：利用html()方法可以修改元素的内容，如果在参数中传入一个空字符串，也可以实现删除元素子节点的效果，如“$("ul").html("")”。

语法	说明
empty()	从被选元素中删除子元素，但不删除元素本身
remove([expr])	清空元素的内容，并删除元素本身（可选参数expr用于筛选元素，该参数可以是任何 jQuery 选择器的语法。）