标签：one javascrip dom node another parent html dom style java
主要内容：
1、HTML DOM元素
2、HTML DOM事件
3、HTML DOM实例
一、DOM元素
主要操作有添加、删除和替换HTML元素
1、创建新的HTML元素
（1）方法一： appendChild() 追加
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。
实例和解析：
<div id="box1">
<p id="p1">This is first paragraph.</p>
<p id="p1">This is second paragraph.</p>
</div>
<script>
// 创建一个新的<p>元素
var para = document.createElement("p");
// 如需向<p>元素添加文本，你要首先创建文本节点，以下这句即为创建文本节点
var node = document.createTextNode("This is new!");
// 接下来，你要将文本节点追加到<p>元素中
para.appendChild(node);
// 最后，要向已有的元素中追加这个元素，先查找到这个元素
var element = document.getElementById("box1");
// 将新元素添加到已有的元素中
element.appendChild(para);
</script>
（2）方法二：insertBefore(new,old) 插入
实例：
<div id="box1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p");// 创建一个新的<p>元素 var node = document.createTextNode("This is another one!"); // 创建文本节点 para.appendChild(node); // 向<p>中追加文本节点 var element = document.getElementById("box");// 查找<p>节点的父节点 var child = document.getElementById("p1"); // 找到<p>节点的同胞节点 element.insertBefore(para,child);// 将新创建的<p>节点插入到id为p1的同胞节点之前
2、删除已有的HTML元素
如需删除HTML元素，你需要知道该元素的父元素。
实例：
<div id="box1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
// 获取父元素
var parent = document.getElementById("box1");
// 获取要删除的元素
var child = document.getElementById("p1");
// 删除该元素
parent.removeChild(child);
</script>
简略方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素
var child = document.getElementById("p1"); child.parentNode.removeChild(child); // child.parentNode表示child的父元素
3、替换HTML元素
如需替换 HTML DOM 中的元素，请使用 replaceChild(new,old) 方法：
<div id="box1">
<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 new !");
para.appendChild(node);
var parent = document.getElementById("box1");
var child = document.getElementById("p2");
parent.replaceChild(para,child);
</script>
未完待续...
标签：one javascrip dom node another parent html dom style java
原文地址：https://www.cnblogs.com/schut/p/9503341.html
