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

猴子也能学会的jQuery第十期——jQuery元素操作（下）
📚系列文章—目录🔥

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

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

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

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

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

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

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

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

猴子也能学会的jQuery第七期——jQuery动画（上）

猴子也能学会的jQuery第七期——jQuery动画（下）

猴子也能学会的jQuery第八期——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()方法来实现，下面通过代码进行演示。
```
html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>ajax studytitle>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js">script>
head>
<style>
style>
 
<body>
    <ul>
        <li>提前创建好的lili>
    ul>
body>
<script>
    $(function () {
        var li_1 = $("
我是append添加的li
"); // 创建元素1
```
var li_2 = $("
我是prepend添加的li

"); // 创建元素2

        $("ul").append(li_1);    // 内部添加并且放到内部的最后面

        $("ul").prepend(li_2);    // 内部添加并且放到内部的最前面

});

script>

html>

上述代码中，通过$("ul")获取到页面中的ul元素，并调用append(li)将li元素添加到ul中。append()是把元素添加到匹配元素内部的最后面，而prepend()是把元素添加到匹配元素内部的最前面。

🔗外部添加

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


html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>ajax studytitle>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js">script>
head>
<style>
    div {
        font-weight: bold;
    }
style>
 
<body>
    <div class="box1">原始divdiv>
body>
<script>
    $(function () {
        var div_1 = $("我是before添加的div
"); // 创建元素2
        var div_2 = $("我是after添加的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()方法


html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>ajax studytitle>
    <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>1li>
        <li>2li>
        <li>3li>
    ul>
    <button>点击删除button>
body>
<script>
    $("button").click(function () {
        $("ul").empty();
        console.log($("ul").html());  
    });
script>
 
html>

2️⃣remove()方法


html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>ajax studytitle>
    <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>1li>
        <li>2li>
        <li>3li>
    ul>
    <button>点击删除button>
body>
<script>
    $("button").click(function () {
        $("ul").remove();
        console.log($("ul").html());  
    });
script>
 
html>

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

📚持续更新🔥

📚系列文章—目录🔥

📌回顾上期

🎯jQuery元素操作

🧩添加元素

🔗内部添加

🔗外部添加

🧩删除元素

1️⃣empty()方法

2️⃣remove()方法