添加和刪除節點（HTML元素）
創建新的HTML元素（節點）
要將新元素添加到HTML DOM，你必須創建（元素節點）第一，然後將其附加到現有元素。
例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> 試一試» 例子解釋：
此代碼創建一個新的<p>元素：
var para = document.createElement("p");
要添加文本到<p>元素，你必須首先創建一個文本節點。 此代碼創建一個文本節點：
var node = document.createTextNode("This is a new paragraph.");
然後，你必須附加文本節點到<p>元素：
para.appendChild(node);
最後，你必須將新元素添加到現有元素。
此代碼找到現有的元素：
var
element = document.getElementById("div1");
此代碼附加到現有元素的新元素：
element.appendChild(para);
創建新的HTML元素- insertBefore()
在appendChild()在前面的例子方法，追加新的元素作為父母的最後一個孩子。
如果你不想，你可以使用insertBefore()方法：
例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This
is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script> 試一試» 刪除現有的HTML元素
要刪除HTML元素，你必須知道元素的父元素：
例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script> 試一試» 該方法node.remove()是在DOM 4規格實施。
但由於瀏覽器支持不好，你不應該使用它。
例子解釋：
這個HTML文檔中包含<div>有兩個子節點（二元素<p>元素）：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
找到該元素id="div1"
var parent = document.getElementById("div1");
找到了<p>元素id="p1"
var child = document.getElementById("p1");
從父刪除子：
parent.removeChild(child);
這將是很好能夠不參照父刪除一個元素。
不過比較遺憾的。 在DOM需要知道雙方要刪除元素，和其母公司。
這是一種常見的解決方法：找到要刪除，並使用其parentNode屬性尋父孩子：
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
更換HTML元素
要替換的HTML DOM元素，使用replaceChild()方法：
例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script> 試一試»