前言：
现时朋友们对“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尾部添加
