JS创建、插入、删除和修改节点

时间：03-07来源：作者：点击数：56

在 JavaScript 中，使用 HTML DOM 创建、插入、修改（替换）和删除节点需要分别调用 document 对象和元素对象的相应方法来实现，调用情况分别如下：

创建节点：
- 创建元素节点调用 document.createElement（节点名）；
- 创建文本节点调用 document.createTextNode（节点名）；
- 创建属性节点调用 document.createAttribute（节点名）;
元素节点的内容也可以使用：元素节点 .innerHTML 来设置。
节点的插入分两种情况：在元素子节点列表的后面附加子节点和在元素某个子节点前面插入子节点:
- 第一种情况调用：element.appendChild（子节点）；
- 第二种情况调用：element.insertBefore（新节点，现有节点）。
节点的替换修改：element.replaceChild（新节点，旧节点）。
节点的删除：element.removeChild（子节点）。

下面通过示例 1 演示使用 HTML DOM 对节点分别进行创建、添加、插入、修改和删除操作。其中节点类型包括元素节点和文本节点。

【例 1】使用 HTML DOM 操作节点综合示例。

1.HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML DOM操作节点</title>
<script type="text/javascript" src="js/nod.js"></script>
</head>
<body>
  <div id="box">
     <p>段落一</p>
     <p>段落二</p>
  </div>
  <a href="javascript:addNode()">添加节点</a>
  <a href="javascript:insertNode()">插入节点</a>
  <a href="javascript:updateNode()">修改节点</a>
  <a href="javascript:deleteNode()">删除节点</a>
</body>
</html>

2.JavaScript代码（nod.js）

window.onload = function(){
  var box = document.getElementById("box");  //通过id属性值获得DIV
};
function addNode(){//附加节点
  var p = document.createElement("p"); //创建需要添加的元素节点
  p.innerHTML = "段落三(添加的内容)";
  box.appendChild(p); //将段落节点添加到box的子节点列表后面
}
function insertNode(){//插入节点
  var h2 = document.createElement("h2"); // 创建一个H2元素节点
  h2.innerHTML = "二级标题(插入的内容)";
  var oP = document.getElementsByTagName("p")[0]; //获取第一个段落
  box.insertBefore(h2,oP); //在第一个段落前面插入一个H2标题
}
function updateNode(){//修改节点
  var oP = document.getElementsByTagName("p")[1];//获取第二个段落
  var oldtxt = oP.firstChild;//获取第二个段落的文本节点
  //创建需要替换旧文本节点的新文本节点
  var newtxt = document.createTextNode("新段落二(修改的内容)");     
   oP.replaceChild(newtxt,oldtxt); //使用newtxt节点替换oldtxt节点
}
function deleteNode(){//删除节点
  var oP = document.getElementsByTagName("p")[0];//获取第一个段落
  box.removeChild(oP);//删除第一个段落
}