📚系列文章—目录🔥

猴子也能学会的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()方法来实现，下面通过代码进行演示。

提前创建好的li

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

🔗外部添加 

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

原始div

• 上述代码中，在类名为“box1”的元素后面和前面分别插入div元素。其中after()表示在目标元素的后面插入div元素，而before()表示在目标元素的前面插入div元素。

🧩删除元素

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

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

• 下面通过代码进行演示jQuery中节点删除的操作。

1️⃣empty()方法

1
2
3
点击删除

2️⃣remove()方法

1
2
3
点击删除

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

 📚持续更新🔥