二十五岁时我们都一样愚蠢、多愁善感，喜欢故弄玄虚，可如果不那样的话，五十岁时也就不会如此明智。
标题：JavaScript htmldom 节点
添加和删除节点（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() 方法在前面的示例中，将新元素作为父节点的最后一个子项添加.
如果你不想使用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");使用id="p1"找到
<p>元素: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>
