添加和删除节点（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> 试一试»