在DOM模型中除了提供查找并处理节点的属性外，还提供管理节点的相应方法，主要包括创建、删除、替换、插入节点等操作，因此，为了让大家可以更熟悉DOM的相应作用，下面phplife.net就为大家介绍下创建、删除、替换、插入节点的方法，希望大家可以认真阅读，并理解这些方法的应用。
（1）创建和添加节点方法
在DOM中对于不同类型节点的创建略有不同，比如：创建元素节点采用createElement（），创建文本节点采用createTextNode（），创建文档碎片节点采用createDocumentFragment（），如果你想创建不同的节点，你就可以通过这些方法去实现，对于创建好的节点，我们该如何去添加到页面中呢？这时可以采用appendChild（）方法去添加创建好的节点。但是通过该方法添加的节点位置永远是在节点childNodes列表的尾部。下面我们通过一个实例为大家进行演示下各个方法的使用，如下：
<html>
<head>
<title>创建新节点</title>
<script language=“javascript”>
function createP（）{
var oP = document.createElement（“p”）；
var oText = document.createTextNode（“这是一段感人的故事”）；
oP.appendChild（oText）；
document.body.appendChild（oP）；
}
</script>
</head>
<body onload=“createP（）”>
<p>事先写一行文字在这里，测试appendChild（）方法的添加位置</p>
</body>
</html>
（2）删除节点方法
DOM中能够添加节点，那么自然可以删除节点，只要采用removeChild（）方法就可以实现，但是必须通过删除节点的父节点来调用该方法。基本操作思路就是找到要删除的节点，然后通过parentNode属性找到其父节点，在让父节点去调用removeChild（）方法，即可实现节点的删除，实例如下：
<html>
<head>
<title>删除节点</title>
<script language=“javascript”>
function deleteP（）{
var oP = document.getElementsByTagName（“p”）[0];
oP.parentNode.removeChild（oP）；//删除节点
}
</script>
</head>
<body onload=“deleteP（）”>
<p>这行文字你看不到</p>
</body>
</html>
（3）替换节点方法
对于节点有时不光是要添加和删除，而是需要替换页面中的某个元素，这时我们可以采用replaceChild（）方法来实现元素的替换，该方法接受两个参数，第一个参数是要替换的新节点，第二个参数是要被替换的节点，同时该方法也是需要通过要替换节点的父节点来操作的。具体操作实例如下：
<html>
<head>
<title>替换节点</title>
<script language=“javascript”>
function replaceP（）{
var oOldP = document.getElementsByTagName（“p”）[0];
var oNewP = document.createElement（“p”）；//新建节点
var oText = document.createTextNode（“这是一个感人肺腑的故事”）；
oNewP.appendChild（oText）；
oOldP.parentNode.replaceChild（oNewP,oOldP）；//替换节点
}
</script>
</head>
<body onload=“replaceP（）”>
<p>这行文字被替换了</p>
</body>
</html>
（4）插入节点方法
1）在特定节点前插入节点
如果你希望创建的节点是插入到已知节点之前，可以采用insertBefore（）方法实现，该方法也是接受两个参数，第一个是新节点，第二个是目标节点，具体操作我们通过下面的实例为大家讲解下：
<html>
<head>
<title>插入节点</title>
<script language=“javascript”>
function insertP（）{
var oOldP = document.getElementsByTagName（“p”）[0];
var oNewP = document.createElement（“p”）；//新建节点
var oText = document.createTextNode（“这是一个感人肺腑的故事”）；
oNewP.appendChild（oText）；
oOldP.parentNode.insertBefore（oNewP,oOldP）；//插入节点
}
</script>
</head>
<body onload=“insertP（）”>
<p>插入到这行文字之前</p>
</body>
</html>
通过上面的方法我们可以快速实现页面的少量更新，但是如果页面中需要添加的节点比较多我们可以通过创建一个文档碎片，然后在实现添加到页面中。如下：
<html>
<head>
<title>文档碎片</title>
<style type=“text/css”>
<!–
p{
padding:2px;
margin:0px;
}
–>
</style>
<script language=“javascript”>
function insertPs（）{
var aColors = [“red”，“green”，“blue”，“magenta”，“yellow”，“chocolate”，“black”，“aquamarine”，“lime”，“fuchsia”，“brass”，“azure”，“brown”，“bronze”，“deeppink”，“aliceblue”，“gray”，“copper”，“coral”，“feldspar”，“orange”，“orchid”，“pink”，“plum”，“quartz”，“purple”];
var oFragment = document.createDocumentFragment（）；//创建文档碎片
for（var i=0;i<aColors.length;i++）{
var oP = document.createElement（“p”）；
var oText = document.createTextNode（aColors[i]）；
oP.appendChild（oText）；
oFragment.appendChild（oP）；//将节点先添加到碎片中
}
document.body.appendChild（oFragment）；//最后一次性添加到页面
}
</script>
</head>
<body onload=“insertPs（）”>
</body>
</html>
2）在特定节点后插入节点
通过上面的介绍我们知道在DOM中添加元素可以采用insertBefore（）方法在目标元素之前添加，或是通过appendChild（）方法在父元素的childNodes末尾添加新元素，那么如果你想在特定元素之后添加节点该怎么实现？在DOM中没有提供相应的方法来实现，但是我们可以通过已经学过的知识自行编写实现，代码如下：
<html>
<head>
<title>insertAfter（）方法</title>
<script language=“javascript”>
function insertAfter（newElement, targetElement）{
var oParent = targetElement.parentNode;//首先找到目标元素的父元素
if（oParent.lastChild == targetElement）//如果目标元素已经是最后一个子元素了
oParent.appendChild（newElement）；//则直接用appendChild（）加到子元素列表的最后
else//否则用insertBefore（）插入到目标元素的下一个兄弟元素之前
oParent.insertBefore（newElement,targetElement.nextSibling）；
}
function insertP（）{
var oOldP = document.getElementById（“myTarget”）；
var oNewP = document.createElement（“p”）；//新建节点
var oText = document.createTextNode（“这是一个感人肺腑的故事”）；
oNewP.appendChild（oText）；
insertAfter（oNewP,oOldP）；//插入节点
}
</script>
</head>
<body onload=“insertP（）”>
<p id=“myTarget”>插入到这行文字之后</p>
<p>也就是插入到这行文字之前，但这行没有id，也可能不存在</p>
</body>
</html>
结果如图：
对于DOM提供创建、删除、替换、插入节点的方法应用说简单也很简单，说难也挺难的，但是只要大家一步步地根据实例去实践一遍，我相信大家就可以较好地理解并应用。