1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <div id="div1"> 7 <p id="p1">這是一個段落</p> 8 <p id="p2">這是另一個段落</p> 9 </div> 10 </head> 11 12 <body> 13 <script> 14 /*1.創建新的<p>元素*/ 15 var para=document.createElement("p"); 16 /*2.向<p>元素添加文本（首先創建文本節點），（此段代碼創建了一個文本節點）*/ 17 var node=document.createTextNode("這是新段落"); 18 /*向<p>元素追加這個文本節點*/ 19 para.appendChild(node); 20 /*最后您必須向一個已有的元素追加這個元素*/ 21 /*3.這段代碼找到一個已有的元素*/ 22 var element=document.getElementById("div1"); 23 /*4.這段代碼向這個已有的元素追加新元素*/ 24 element.appendChild(para); 25 </script> 26 </body> 27 </html>
刪除已有的HTML元素
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <div id="div1"> 6 <p id="p1">這是一個段落。</p> 7 <p id="p2">這是另一個段落。</p> 8 </div> 9 10 <script> 11 /*找到父元素*/ 12 var parent=document.getElementById("div1"); 13 /*找到子元素*/ 14 var child=document.getElementById("p1"); 15 /*將子元素從父元素中刪除*/ 16 parent.removeChild(child); 17 </script> 18 19 </body> 20 </html>
提示：如果能夠在不引用父元素的情況下刪除某個元素，就太好了。
不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。
這是常用的解決方案：找到您希望刪除的子元素，然后使用其 parentNode 屬性來找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);