节点操作
创建节点
语法：element document.createElement(“tagName”); 创建一个节点
参数：tagName 标签名称
返回值：创建好的节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
{
let h1 = document.createElement("h1");
let h2 = document.createElement("hea");
h1.innerHTML = "h1标题";
h2.innerHTML = "胡写的标签";
console.log(h1);
console.log(h2);
}
</script>
</body>
</html>
document.createElement方法仅仅创造一个节点，不会帮你把节点加载到文档中，同时我们可以发现 可以创造任何标签（建议创建合法的标签）。
向页面中添加节点
- el.appendChild(node) 在元素的末尾添加一个子级
- el.insertBefore(newNode,oldNode) 在 oldNode 前边添加入 newNode
- 在使用 appendChild 和 insertBefore时，如果添加是一个页面上已经存在的节点，会先从原位置删除，然后在添加到新的位置去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<p>这是box</p>
</div>
<script>
{
let box = document.querySelector("#box");
let h1 = document.createElement("h1");
h1.innerHTML = "hello h1!"
box.appendChild(h1);
}
</script>
</body>
</html>
parent.appendChild(node);
向 parent 插入 node，插入在 node 的内容的最末尾。
let box = document.querySelector("#box");
let h1 = document.createElement("h1");
let p = document.querySelector("p");
h1.innerHTML = "hello h1!"
// box.appendChild(h1);
box.insertBefore(h1);
注意：el.insertBefore不能只写一个参数。
let box = document.querySelector("#box");
let h1 = document.createElement("h1");
let p = document.querySelector("p");
h1.innerHTML = "hello h1!"
// box.appendChild(h1);
// box.insertBefore(h1);
box.insertBefore(h1, p);
parent.insertBefore(newNode,oldNode);
在 parent 插入 newNode，插入在 oldNode 之前。
应用：插入的是已有节点，即将已存在的节点剪切到某个节点的指定位置。
注意：如果插入的节点是一个已有节点的话，会先把这个节点，从原先的位置删除，然后放入我们的新位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">box1
<div id="div1">div1</div>
</div>
<div id="box2">box2
<div id="div2">div2</div>
</div>
<script>
{
let box1 = document.querySelector("#box1");
let div1 = document.querySelector("#div1");
let box2 = document.querySelector("#box2");
let div2 = document.querySelector("#div2");
box2.appendChild(div1);
}
</script>
</body>
</html>
将div2插入到div1前。
let box = document.querySelector("#box");
let div1 = document.querySelector("#div1");
let box2 = document.querySelector("#box2");
let div2 = document.querySelector("#div2");
// box2.appendChild(div1); // 剪切操作
box.insertBefore(div2,div1);
（后续待补充）
