JS HTML DOM元素节点

时间：2018-11-03 02:26:32 阅读：625 评论：0 收藏：0 [点我收藏+]

要想创建一个元素节点，首先要创建一个新元素，然后在新元素中添加

1、appendChild（）尾部添加

使用步骤：（1）新建类型（2）添加内容（3）组合节点（4）定位节点（5）添加节点

代码示范：

<div id="div1">
  <p id="p1">这是第一个初始段落</p>
  <p id="p2">这是第二个初始段落</p>
</div>
<script>
var para = document.createElement("p"); //新建p标签类型的节点
var content = document.createTextNode("这是一个新建节点"); //为节点添加内容
para.appendChild(content); //组合节点
var position = document.getElementById("div1"); //定位节点
position.appendChild(para); //添加节点
</script>

2、insertBefore（）首部添加

使用步骤：（1）新建类型（2）添加内容（3）组合节点（4）定位大范围（5）定位小范围（6）添加节点

代码示范：

<div id="div1">
  <p id="p1">这是第一个初始段落</p>
  <p id="p2">这是第二个初始段落</p>
</div>
<script>
var para = document.createElement("p"); //创建p标签类型的节点
var content = document.createTextNode("这是新添加的节点"); //为节点添加内容
para.appendChild(content); //组合节点
var big_position = document.getElementById("div1"); //定位大范围
var small_position = document.getElementById("p2"); //定位小范围
big_position.insertBefore(para,small_position); //添加节点

可以看出，insertBefore（）的还使用方法与appendChild（）截然不同。有两个参数：（1）是要添加的节点名称（2）是节点要添加在哪个元素的前方

3、removeChild（）移除节点

使用步骤：（1）获取父元素（2）获取目标元素（3）组合移除

代码示范：

<div id="div1">
  <p id="p1">这是第一个初始段落</p>
  <p id="p2">这是将被移除的段落</p>
  <p id="p3">这是第二个初始段落</p>
</div>
<script>
var parent = document.getElementById("div1"); //获取父元素
var child = document.getElementById("p2"); //获取目标元素
parent.removeChild(child); //组合删除

删除节点必须知道父节点必须知道

4、replaceChild（）替换节点

使用步骤：（1）获取父元素（2）获取目标元素（3）替换

代码示范：

<div id="div1">
    <p id="p1">这是一个初始段落</p>
    <p id="p2">这是一个初始段落</p>
    <p id="p3">这是一个初始段落</p>
    <p id="p4">这是一个初始段落</p>
</div>
<script>
    var para = document.createElement("p");
    var content = document.createTextNode("I am fine");
    para.appendChild(content);
    var parent = document.getElementById("div1");
    var child = document.getElementById("p2");
    parent.replaceChild(para,child);