1. 什么是文档操作？
在第二讲中，我们介绍了如何使用jQuery进行DOM节点的查找操作，本讲介绍剩余的节点操作：添加节点、删除节点、修改节点、替换节点、复制节点；
2. 添加节点
- 父元素.append(子元素) 【在父元素内部追加子元素。】
- 子元素.appendTo(父元素)【将子元素追加到父元素的内部。】
<body>
<ul>
<li>苹果</li>
</ul>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var newEle = $("<li>橘子</li>"); //创建一个节点
$("ul").append(newEle);
newEle.appendTo("ul");
</script>
</body>
- 父元素.prepend(子元素) 【在父元素内部前置添加子元素到第一个位置。】
- 子元素.prependTo(父元素) 【将子元素前置添加到父元素的内部的第一个位置。】
<body>
<ul>
<li>苹果</li>
</ul>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var newEle = $("<li>橘子</li>"); //创建一个节点
$("ul").prepend(newEle);
newEle.prependTo("ul");
</script>
</body>
- 兄弟元素.before(待插入的兄弟元素)
- 待插入的兄弟元素.inserBefore(兄弟元素)
<body>
<ul>
<li>苹果</li>
</ul>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var newEle = $("<p>hello world</p>"); //创建一个节点
$("ul").before(newEle);
newEle.insertBefore("ul");
</script>
</body>
- 兄弟元素.after(待插入的兄弟元素)
- 待插入的兄弟元素.insertAfter(兄弟元素)
<body>
<ul>
<li>苹果</li>
</ul>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
var newEle = $("<p>hello world</p>"); //创建一个节点
$("ul").after(newEle);
newEle.insertAfter("ul");
</script>
</body>
3. 删除节点
- 元素节点.remove()
- 用法：删除指定节点，节点上绑定的事件也会被删除
<script src="js/jquery-3.4.0.js"></script>
<script>
$('ul').remove(); // 删除所有ul
$('ul').remove("#ul1"); // 删除id为ul1的buttion
</script>
- 元素节点.detach()
- 用法：删除指点节点，节点上绑定的事件不会被删除
<script src="js/jquery-3.4.0.js"></script>
<script>
$('button').detach() // 删除所有buttion
$("div").detach("#btn1"); // 删除id为btn1的buttion
</script>
- 对比 remove() 和 detach()
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div {
background-color: gray;
width: 300px;
height: 50px;
margin: 10px;
line-height: 50px;
text-align: center;
}
#box2 {
background-color: green;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<button id="btn1"> 删除box1 </button>
<button id="btn2"> 删除box2 </button>
<script src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
$("div").click(function () {
alert("id 为 " + $(this).attr("id") + " 的div 被点击了！");
});
$("#btn1").click(function () {
$div1 = $("#box1").remove();
$("body").append($div1);
});
$("#btn2").click(function () {
$div2 = $("#box2").detach();
$("body").append($div2);
});
</script>
</body>
</html>
- 元素节点.empty()
- 用法：删除指定节点的所有后代节点
<script src="js/jquery-3.4.0.js"></script>
<script>
$('ul').empty()
</script>
4. 替换节点
- 被替换的元素.replaceWith(替换内容)
- 用法：将指定元素替换成HTML代码或DOM元素（String对象、DOM对象、jQuery对象）
<script src="js/jquery-3.4.0.js"></script>
<script>
$("button").click(function () {
// 创建一个新的节点
var $ele = $("<h4>hello</h4>");
// 利用新的节点替换旧的节点
$("h1").replaceWith($ele);
});
</script>
- 替换内容.replaceAll(被替换的元素)
<script src="js/jquery-3.4.0.js"></script>
<script>
$("button").click(function () {
// 创建一个新的节点
var $ele = $("<h4>hello</h4>");
// 利用新的节点替换旧的节点
$ele.replaceAll("h1");
});
</script>
5. 复制节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquey 复制节点</title>
<style>
#btn1 {
background-color: gray;
padding: 10px;
color: white;
margin: 10px;
border: 0px;
}
#btn2 {
background-color: pink;
padding: 10px;
color: white;
margin: 10px;
border: 0px;
}
</style>
</head>
<body>
<button id="btn1">Hello</button>
<button id="btn2">Welcome</button>
<script src="js/jquery-3.4.0.js"></script>
<script>
// 浅复制：clone方法不带参数true，复制标签但不复制标签上绑定的事件
$("#btn1").on("click", function () {
$(this).clone().insertAfter(this);
});
// 深复制：clone方法带参数true，复制标签并且复制标签上绑定的事件
$("#btn2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
运行效果如下：只有第一个hello按钮上点击有反应，其余新复制的hello按钮点击无反应；而所有welcome按钮点击都有反应。
