節點操作
創建節點
語法：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);
（後續待補充）