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);