龙空技术网

jQuery 添加和删除HTML元素

MAO大侠 102

前言:

现时同学们对“jquery 移出元素”大致比较珍视,咱们都需要学习一些“jquery 移出元素”的相关资讯。那么小编也在网摘上网罗了一些关于“jquery 移出元素””的相关知识,希望小伙伴们能喜欢,姐妹们快快来了解一下吧!

本节我们学习如何使用 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。示例:

我们来看下面这个例子:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){    $("button").click(function(){      $("p").append("侠课岛");    });  });</script></head><body>  <p>你好,我的名字叫做:</p>  <button>点击追加文本</button></body></html>

点击按钮,在指定的 <p> 标签末尾添加文本内容 “侠课岛”,我们可以在浏览器中看一下演示结果:

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

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){    $("button").click(function(){      $("ul").append("<li>strawberry</li>");    });  });</script></head><body>  <ul>    <li>apple</li>    <li>pear</li>    <li>peach</li>    <li>watermelon</li>  </ul>  <button>点击追加文本</button></body></html>

在浏览器中的演示结果:

prepend()方法

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

语法如下:

$(selector).prepend(content,function(index,html))
示例:

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

$(function(){    $("button").click(function(){      $("ul").prepend("<li>strawberry</li>");    });});

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

after()方法

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

示例:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){    $("button").click(function(){      $("p").after("<p>侠课岛</p>");    });  });</script></head><body>  <p>你好,我的名字叫做:</p>  <button>点击追加文本</button></body></html>

在浏览器中的演示效果:

before()方法

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

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

示例:

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

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

在浏览器中的演示效果:

remove()方法

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

示例:

例如下面这个例子:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script>  $(function(){    $("button").click(function(){      $("p").remove();    });  });</script></head><body>  <p>你好,欢迎来到侠课岛!</p>  <button>点击删除</button></body></html>

在浏览器中的演示效果:

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

empty()方法

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

示例:

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

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

在浏览器中的演示效果:

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

标签: #jquery 移出元素