创建新的HTML元素
1 <div id="div1"> 2 <p id="p1">这是一个段落</p> 3 <p id="p2">这是另一个段落</p> 4 </div> 5 6 <script> 7 var para=document.createElement("p");//创建新的<p>元素 8 var node=document.createTextNode("这是新段落。");//创建新的文本节点 9 para.appendChild(node);//向<p>元素追歼这个文本节点 10 //向一个已有元素追加这个新元素 11 var element=document.getElementById("div1");//找到一个已有元素 12 element.appendChild(para);//向这个已有元素追加新元素 13 </script>
删除已有的元素
1 <div id="div1"> 2 <p id="p1">这是一个段落。</p> 3 <p id="p2">这是另一个段落。</p> 4 </div> 5 6 <script> 7 var parent=document.getElementById("div1");//找到父元素 8 var child=document.getElementById("p1");//找到子元素 9 parent.removeChild(child);//从父元素中删除子元素 10 </script>
DOM 需要清楚您需要删除的元素，以及他的父元素
可以使用子元素的parentNode属性来找父元素
1 var child=document.getElementById("p1"); 2 child.parentNode.removeChild(child);