JavaScript学习笔记—DOM：元素的添加、修改、删除
appendChild(node)：向节点添加最后一个子节点insertAdjacentHTML(position, text)：把元素插入到指定位置- position：
- beforebegin - 插入到当前元素的前面，即开始标签之前
- afterbegin - 作为当前元素的子元素，插入到所有子元素之前，即开始标签之后
- beforeend - 作为当前元素的子元素，插入到所有子元素之后，即结束标签之前
- afterend - 插入到当前元素的后面，即结束标签之后
- text：
- 是要被解析为HTML或XML,并插入到DOM树中的字符串。
- position：
remove()：删除当前节点元素replaceWith()：使用一个元素替换当前元素
具体位置：
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
实例：
<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
<button id="btn01">按钮1</button>
<button id="btn02">按钮2</button>
<hr />
<ul id="list">
<li id="swk">孙悟空</li>
<li id="zbj">猪八戒</li>
<li id="shs">沙和尚</li>
</ul>
<script>
/*
点击按钮后，向ul中添加一个唐僧
*/
// 获取ul
const list = document.getElementById("list");
// 获取按钮
const btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// <li id="shs">沙和尚</li>
// 创建一个li
const li = document.createElement("li");
// 向li中添加文本
li.textContent = "唐僧";
// 给li添加id属性
li.id = "ts";
// appendChild() 用于给一个节点添加子节点
// list.appendChild(li)
//insertAdjacentElement()可以向元素的任意位置添加元素
//两个参数：1.要添加的位置 2.要添加的元素
// beforeend 标签的最后 afterbegin 标签的开始
// beforebegin 在元素的前边插入元素（兄弟元素） afterend 在元素的后边插入元素（兄弟元素）
// list.insertAdjacentElement("afterend", li);
list.insertAdjacentHTML("beforeend", "<li id='bgj'>白骨精</li>")
}
const btn02 = document.getElementById("btn02")
btn02.onclick = function(){
// 创建一个蜘蛛精替换孙悟空
const li = document.createElement("li")
li.textContent = "蜘蛛精"
li.id = "zzj"
// 获取swk
const swk = document.getElementById("swk")
// replaceWith() 使用一个元素替换当前元素
// swk.replaceWith(li)
// remove()方法用来删除当前元素
swk.remove()
}
</script>
</body>
</html>
