JavaScript HTML DOM 节点 - 添加和删除HTML元素
HTML DOM 节点
JavaScript HTML DOM 元素（节点），添加和删除节点（HTML 元素）。
创建新的 HTML 元素
如需添加新元素时，首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
首先找到 id="div1" 的元素
然后找到 id="p1" 的 <p> 元素
最后从父元素中删除子元素
提示：删除某个元素需要引用父元素。DOM 需要清楚您需要删除的元素，以及它的父元素。
常用的解决方案：找到希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
HTML DOM 教程
如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素
JavaScript HTML DOM 元素（节点），添加和删除节点（HTML 元素）。
创建新的 HTML 元素
如需添加新元素时，首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p"); // 创建新的 <p> 元素
var node=document.createTextNode("这是新段落。"); // 创建了一个文本节点
para.appendChild(node); // 向 <p> 元素追加这个新创建的文本节点
var element=document.getElementById("div1"); // 找到一个已有的元素
element.appendChild(para); // 向这个已有的元素追加新元素
</script>
</body>
</html>
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1"); // 找到 id="div1" 的元素
var child=document.getElementById("p1"); // 找到 id="p1" 的 <p> 元素
parent.removeChild(child); // 从父元素中删除子元素
</script>
</body>
</html>
注释：这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素。首先找到 id="div1" 的元素
然后找到 id="p1" 的 <p> 元素
最后从父元素中删除子元素
提示：删除某个元素需要引用父元素。DOM 需要清楚您需要删除的元素，以及它的父元素。
常用的解决方案：找到希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
HTML DOM 教程
如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素
2016-07-28 2426人浏览
评论