jQuery 添加和删除HTML元素

本节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。

jQuery 中用于添加 HTML 元素的方法有如下几种：

方法	描述
append()	在所选元素的末尾插入内容
prepend()	在选定元素的开头插入内容
after()	在选定元素后插入内容
before()	在选定元素之前插入内容

而用于删除元素的方法有：

方法	描述
remove()	删除被选元素容，包括子元素
empty()	删除被选元素的所有子节点和内容

append()方法

append() 方法可以在指定元素的末尾插入内容。

语法如下：

$(selector).append(content,function(index,html))

• content：规定要插入的内容，可以包含 HTML 元素、jQuery 对象、DOM 元素。
• function(index,html)：规定返回待插入内容的函数，index 为集合中元素的索引位置，html 为被选元素的当前 HTML。

示例：

我们来看下面这个例子：

  
你好，我的名字叫做：
  点击追加文本

点击按钮，在指定的

标签末尾添加文本内容 "侠课岛"，我们可以在浏览器中看一下演示结果：

除了文本内容，我们还可以在元素中添加 HTML ：

  

    
apple
    
pear
    
peach
    
watermelon
  
  点击追加文本

在浏览器中的演示结果：

prepend()方法

prepend() 方法其实和 append() 方法类似，语法也差不多。但是 prepend() 方法主要用于在被选元素的开头插入指定内容。

语法如下：

$(selector).prepend(content,function(index,html))

示例：

我们将上述示例中的 append() 方法改成 prepend() 方法：

$(function(){
    $("button").click(function(){
      $("ul").prepend("
strawberry
");
    });
});

然后看一下在浏览器中的演示结果：

after()方法

after() 方法用于在被选元素后插入指定的内容。看起来 after() 方法和 append() 方法的作用好像差不多，但是其实两个方法还是有区别的。 append() 方法是在被选元素的结尾插入内容，插入的内容仍然在元素内部。而 after() 插入的内容会重新起一行，与被选择的元素并没有什么逻辑上的联系。

示例：

  
你好，我的名字叫做：
  点击追加文本

在浏览器中的演示效果：

before()方法

before() 方法用于在被选元素之前插入指定的内容。它和 prepend() 方法的区别在于一个在被选元素内插入内容，一个在被选元素外。

注意 before() 方法和 after() 方法都是在被选元素外插入内容。append() 和 prepend() 方法都是在被选元素内插入内容。

示例：

例如将上述示例中的方法改为 before：

$(function(){
    $("button").click(function(){
      $("p").before("
侠课岛
");
    });
});

在浏览器中的演示效果：

remove()方法

remove() 方法用于删除被选元素及其子元素。该方法也会删除被选元素的数据和事件。

示例：

例如下面这个例子：

  
你好，欢迎来到侠课岛！
  点击删除

在浏览器中的演示效果：

从上图中可以看到，remove() 方法将指定的 p 元素连标签带元素全部删除。

empty()方法

empty() 方法用于删除被选元素的所有子节点和内容。该方法不会移除元素本身，或它的属性。

示例：

我们讲上述示例中的 remove() 方法改为empty() 方法，看看有什么不同：

$(function(){
    $("button").click(function(){
      $("p").empty();
    });
});

在浏览器中的演示效果：

可以看到 empty() 方法只会删除指定元素中的内容，不会删除元素本身，当然如果元素上有属性，属性也不会被删除，大家可以自己试一下。

链接：https://www.9xkd.com/