肉渣教程

DOM 节点

上一节 下一节

JavaScript可以添加、删除、替换节点。

  • appendChild() - 创建新的HTML节点插入在父元素结尾(运行一下
  • insertBefore() - 创建新的HTML节点插入某元素前面(运行一下
  • removeChild() - 删除指定HTML节点(运行一下
  • replaceChild() - 替换指定HTML节点(运行一下

appendChild() - 创建新的HTML节点插入在父元素结尾

如下所示,使用appendChild()方法创建一个元素节点,再通过appendChild()方法把该节点作为子元素,插入到指定父元素的结尾。(新插入的元素包含在父元素内)

<div id="div1">
<p id="p1">地振高冈,一派西山千古秀</p>
<p id="p2">门朝大海,三合河水万年流</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("【这是新插入的一段文本】");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

运行一下

insertBefore() - 创建新的HTML节点插入某元素前面

如下所示,使用appendChild()方法创建一个元素节点,再通过insertBefore()方法把该节点插入在某元素前面。

<div id="div1">
<p id="p1">地振高冈,一派西山千古秀</p>
<p id="p2">门朝大海,三合河水万年流</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("【这是新插入的一段文本】");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

运行一下

removeChild() - 删除指定HTML节点

通过removeChild()方法可以删除父元素中的指定子元素节点。

<div id="div1">
<p id="p1">地振高冈,一派西山千古秀</p>
<p id="p2">门朝大海,三合河水万年流</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child); // 删除div1元素的子元素节点p1
</script>

运行一下

replaceChild() - 替换指定HTML节点

通过replaceChild()方法可以使用新建节点来替换父元素中指定子元素。

<div id="div1">
<p id="p1">地振高冈,一派西山千古秀</p>
<p id="p2">门朝大海,三合河水万年流</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("【这是新插入的一段文本】");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p2");
element.replaceChild(para, child); // 用新节点替换id为p2的元素
</script>

运行一下


DOM 节点

上一节 下一节