上面我们已经了解了DOM的相关知识，知道了可以使用Javascript修改DOM树结构的任何地方。今天武汉网站建设公司分享一下如何添加节点及删除节点。先从简单的说起，在文档的末尾追加一个节点。
在文档中添加节点关键使用js中以下几种方法：createTextNode()、createElement()、appendChild()及getElementsByTagName()。其中最核心的就前面三种方法。现在讲这些方法逐一说明：
createTextNode() 创建一个新的文本节点；
createElement() 创建一个新的元素节点；
appendChild() 将一个元素节点添加到另一个元素节点中成为其子节点
getElementsByTagName() 通过TagName（标签名称）来获得元素，一个DOCUMENT中当然会有相同的标签，所以这个方法也是取得一个数组。如果想索引某个元素可以通过[]和数字的组合得到。比如，您想得到页面中第一个p标签，可以通过以下的方式得到getElementsByTagName("p")[0]。
下面我们看一个具体的实例.这个实例要达到的效果是，让用户在页面的文本框输入一些内容，并点击提交按钮后，然后将一个新段落添加到页面中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>adding Node</title>
</head>
<script>
window.onload=init();
function init(){
document.getElementsByTagName("form")[0].onsubmit = function(){return addNode();}
function addNode(){
var inText = document.getElementById("textArea").value; //得到textarea输入的数据
var newText = document.createTextNode("inText"); //创建一个文本节点，它将接收，textarea输入的数据
var newGraf =document.createElement("p"); //创建一个元素节点，
newGraf.appendChild(newText); //为了将新文本节点添加到新的段落中，必须调用appendChild()方法.将newText传递给它时，同时将文本节点放入到段落中.
var docBody = document.getElementsByTagName("body")[0]; //通过getElementsByTagName("body")[0]方法查明body的位置.
docBody.appendChild(newGraf); //将newGraf（刚创建的元素标签）追加到docBody（页面）中，从而将用户输入的文本信息，显示到页面上
}
}
</script>
<body>
<form action="#">
<textarea name="textArea" rows="5" cols="30"></textarea>
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
就是在页面上添加内容的思路及方法。说完添加内容，下面我们看看怎么删除页面内容。删除DOM节点的核心方法：removeChild(),方法与上面讲的appendChild()刚好相反。通俗说一个是添加。一个是删除。以下我们提供删除页面标签的源码供您参考
function delNode()
{
var allGrafs = document.getElementsByTagName("p"); //返回页面中的所有<p>,即使一个数组.
if(allGrafs.length>1){ //判断该数组的长度.其表示只有当数组有个元素才执行删除.也即是页面至少有个p标签才删除.
var lastGraf = allGrafs.item(allGrafs.length-1); //找到最后一个p标签
var docBody = document.getElementsByTagName("body")[0];
docBody.removeChild(lastGraf); //通过removeChild()删除页面最后一个p标签
}
else{
alert("nothing to remove");
}
return false;
}
