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。
示例：
我们来看下面这个例子：
<!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() 方法只会删除指定元素中的内容，不会删除元素本身，当然如果元素上有属性，属性也不会被删除，大家可以自己试一下。
