JavaScript 新建和刪除DOM 元素（節點）
阿新 • • 發佈：2019-01-11
建立新的 HTML 元素
如需向 HTML DOM 新增新元素，您必須首先建立該元素（元素節點），然後向一個已存在的元素追加該元素。
例項
<html> <body> <div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另一個段落。</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("這是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>
這段程式碼建立新的 <p> 元素：
var para=document.createElement("p");
如需向 <p> 元素新增文字，您必須首先建立文字節點。這段程式碼建立了一個文字節點：
var node=document.createTextNode("這是新段落。");
然後您必須向 <p> 元素追加這個文字節點：
para.appendChild(node);
最後您必須向一個已有的元素追加這個新元素。
這段程式碼找到一個已有的元素：
var element=document.getElementById("div1");這段程式碼向這個已有的元素追加新元素：
element.appendChild(para);
刪除已有的 HTML 元素
如需刪除 HTML 元素，您必須首先獲得該元素的父元素：
例項
<html> <body> <div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另一個段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script> </body> </html>
這個 HTML 文件含有擁有兩個子節點（兩個 <p> 元素）的 <div> 元素：
<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另一個段落。</p> </div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
從父元素中刪除子元素：
parent.removeChild(child);
提示：如果能夠在不引用父元素的情況下刪除某個元素，就太好了。
不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。
這是常用的解決方案：找到您希望刪除的子元素，然後使用其 parentNode 屬性來找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
注：本文內容摘W3C