通過DOM，JavaScript可以動(dòng)態(tài)移除或添加HTML元素。
添加HTML節(jié)點(diǎn)
要?jiǎng)?chuàng)建新的 HTML 元素，需要先創(chuàng)建一個(gè)元素，然后在已存在的元素中添加它。使用 creatElement('element') 創(chuàng)建新元素，使用 createTextNode('text') 創(chuàng)建文本，使用 appendChild(node) 將節(jié)點(diǎn)添加到父元素。
<!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>
</head>
<body>
<div id="container">
<p id="content1">這是一個(gè)段落。</p>
<p id="content2">這是另外一個(gè)段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
para.appendChild(node);
var element = document.getElementById("container");
element.appendChild(para);
</script>
</body>
</html>
如果我們需要將新元素添加到開始位置，可以使用 insertBefore() 方法。
<!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>
</head>
<body>
<div id="container">
<p id="content1">這是一個(gè)段落。</p>
<p id="content2">這是另外一個(gè)段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
para.appendChild(node);
var element = document.getElementById("container");
var child = document.getElementById("content1");
element.insertBefore(para, child);
</script>
</body>
</html>
移除已存在的元素
使用 node.remove(child) 方法可以移除一個(gè)元素，前提是知道被移除元素的父元素。
<!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>
</head>
<body>
<div id="container">
<p id="content1">這是一個(gè)段落。</p>
<p id="content2">這是另外一個(gè)段落。</p>
</div>
<script>
var parent = document.getElementById("container");
var child = document.getElementById("content1");
parent.removeChild(child);
</script>
</body>
</html>
使用子節(jié)點(diǎn)找到父節(jié)點(diǎn)，然后再移除子節(jié)點(diǎn)，這樣可以避免直接去找父節(jié)點(diǎn)。
var child = document.getElementById("content1");
child.parentNode.removeChild(child);
替換HTML元素
使用 replaceChild() 方法可以替換 HTML DOM 中的元素。
<!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>
</head>
<body>
<div id="container">
<p id="content1">這是一個(gè)段落。</p>
<p id="content2">這是另外一個(gè)段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
para.appendChild(node);
var parent = document.getElementById("container");
var child = document.getElementById("content1");
parent.replaceChild(para, child);
</script>
</body>
</html>
替換節(jié)點(diǎn)和移除節(jié)點(diǎn)一樣，也需要先獲取父元素。
