jQuery 创建元素、添加元素、删除元素 【一篇文章轻松拿下】

原生 JS 中，我们学习了一整套元素创建添加删除的操作，其中创建元素，我们用了 creatElement，添加元素有两种，分别是后面追加 apprndChild，和指定元素前插入 insertBefore，在 jQuery 里，也有一整套的元素创建添加删除的方法，下面带大家一起学习一下  jQuery 的元素创建，添加，和删除 三连拳法吧！！！

文章目录：

 一：元素创建

 二：元素添加

2.1 元素的内部添加： 

2.1.1 append 父级末尾添加：

2.1.2 prepend 父级排头添加： 

2.2 元素的外部添加：  

 2.2.1 after 兄弟级后面添加：

 2.2.2 before 兄弟级前面添加： 

 三：元素删除 

3.1 remove 删除自身 

 3.2 empty 删除对应的所有子级 

  3.3 html (' ') 删除对应的所有子级 

---

一：元素创建

元素的创建相对于原生 JS 简直不要容易太多，我们只需要一个 ‘ $ ’ 符号就可以走遍天下

元素创建格式：$('

')

 注意：创建的标签应该有开有闭，并且标签在创建时就可以由内容，例如我们可以这样  $('

我是一个div标签

')

  我们只是创建了一个 li 元素，但还没有添加，所以看不到结果

---

二：元素添加

元素的添加和原生 JS 的相同之处在于，都可以指定在元素前添加还是元素后添加，不同之处在于，jQuery 分的更细，将创建好的元素分为了内部添加和外部添加，以下是两种情况的分别讲述：

2.1 元素的内部添加： 

<- 内部添加的两种形式均是可以理解为在父级内部添加了子级 ->

内部添加有两个方法：

• append ( 创建好的元素的命名 )：在内部的最后一个元素的后面添加
• prepend ( 创建好的元素的命名 )：在内部的最前面一个元素的前面添加

2.1.1 append 父级末尾添加：

  

      
原有1
      
原有2
      
原有3
  
    

 创建好的 li 被添加到了 ul 父级的末尾

---

2.1.2 prepend 父级排头添加： 

  

      
原有1
      
原有2
      
原有3
  
    

 创建好的 li 被添加到了 ul 父级的首位

---

2.2 元素的外部添加：  

<- 外部添加的两种形式均是可以理解为给某元素添加了兄弟级 ->

外部添加有两个方法：

• after ( 创建好的元素的命名 )：在某元素的后面添加（兄弟级）
• before ( 创建好的元素的命名 )：在某元素的前面添加（兄弟级）

 2.2.1 after 兄弟级后面添加：

    
我是原有的div
      
  

 创建好的 div 被添加到了类名为aaa的兄弟级的后面

---

 2.2.2 before 兄弟级前面添加： 

    
我是原有的div
      
  

 创建好的 div 被添加到了类名为aaa的兄弟级的前面

---

三：元素删除 

元素删除也有三种形式，对应两大方面：自删，全删

删除的三种形式：

• remove ()：可以删除匹配到的元素，即自删
• empty ()：可以删除掉某个父级内的全部子级，即删掉所有孩子
• html ( ' ' )：可以删除掉某个父级内的全部子级，这个很好理解，就是文本内容的赋值，赋值为空就相当于删掉了所有

3.1 remove 删除自身 

   

       
我是第一个li
       
我是第二个li
       
我是第三个li
   
      
  

  匹配到的第二个 li 自身被删掉了

---

 3.2 empty 删除对应的所有子级 

   

       
我是第一个li
       
我是第二个li
       
我是第三个li
   
      
  

   通过控制台可以看到 ul 的所有子级（所有 li ）都被删掉了，但 ul 还在

---

  3.3 html (' ') 删除对应的所有子级 

   

       
我是第一个li
       
我是第二个li
       
我是第三个li
   
      
  

    通过控制台可以看到 ul 的所有子级（所有 li ）都被删掉了，但 ul 还在，要注意一定要在 html() 括号里加引号，如果不加则其意义为获取内容，不再是赋值为空

创作不易，给个支持吧！