添加、移除、替换、复制节点
append()：给标签内尾部位置添加子元素
语法：$("ol").append("<li>榴莲</li>")
appendTo()：将子元素添加到元素内尾部位置
语法：$("<li>橘子</li>").appendTo("ol")
prepend()：给标签内前面位置添加子元素
语法：$("ol").prepend("<li>葡萄</li>")
prependTo()：将子元素添加到元素内前面位置
语法：$("<li>西瓜</li>").prependTo("ol")
before()：标签前添加一个兄弟元素
语法：$("ol").before("<h2>水果清单</h2>")
after()：标签后添加一个兄弟元素
语法：$("ol").after("<p>良心价——500/kg</p>")
remove()：移除标签本身及所有内容，括号里写选择器，可以指定移除元素
empty()：移除所有的子元素和内容，不包括标签本身
replaceWith()：替换内容
replaceAll()：将内容替换到目标位置
clone()：复制内容，再利用链式添加节点，将内容粘贴到目标位置
示例效果：
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
ol {
/* list-style: none; */
width: 500px;
}
li {
background-color: yellow;
padding: 5px;
}
li:nth-child(2n+1) {
background-color: yellowgreen;
}
p {
color: red;
}
</style>
</head>
<body>
<input type="button" value="添加append" class="btn1">
<input type="button" value="添加appendTo" class="btn2">
<input type="button" value="添加prepend" class="btn3">
<input type="button" value="添加prependTo" class="btn4">
<input type="button" value="添加before" class="btn5">
<input type="button" value="添加after" class="btn6">
<input type="button" value="移除所有列表包括标签本身" class="btn7">
<input type="button" value="清除所有水果" class="btn8">
<input type="button" value="替换replaceWith" class="btn9">
<input type="button" value="替换replaceAll" class="btn10">
<input type="button" value="复制clone" class="btn11">
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ol>
<script>
$(function() {
$(".btn1").click(function() {
$("ol").append("<li>榴莲</li>")
})
$(".btn2").click(function() {
$("<li>橘子</li>").appendTo("ol")
})
$(".btn3").click(function() {
$("ol").prepend("<li>葡萄</li>")
})
$(".btn4").click(function() {
$("<li>西瓜</li>").prependTo("ol")
})
$(".btn5").click(function() {
$("ol").before("<h2>水果清单</h2>")
})
$(".btn6").click(function() {
$("ol").after("<p>良心价——500元/kg</p>")
})
$(".btn7").click(function() {
$("ol").remove()
})
$(".btn8").click(function() {
$("ol").empty()
})
$(".btn9").click(function() {
$("ol li:eq(1)").replaceWith("<li><a href='#'>馒头</a></li>")
})
$(".btn10").click(function() {
$("<li><a href='#'>包子</a></li>").replaceAll("ol li:even")
})
$(".btn11").click(function() {
$("ol li:eq(1)").clone().appendTo("ol")
})
})
</script>
</body>
</html>