JavaScript 动态网页实例 —— DOM中的节点操作

        DOM是 Document Object Model的缩写，由W3C进行标准化。文档对象模型(DOM)是一个基础性概念，主要涉及网页页面元素的层次关系。很好地理解文档对象模型(DOM)的概念，对于编写出高效、实用的JavaScript程序是非常有帮助的。DOM将HTML文档理解为一棵完整的代码树，每个HTML标签就是该树上的一个节点。本章介绍DOM中的节点操作，主要包括:节点插入与追加、节点复制、节点删除与替换、修改节点内容等知识。

节点插入与追加

本节给出一段节点插入与追加的示例代码,可以实现在页面中某节点前或节点后插入新的节点。

要点

        本节代码主要使用了Node(节点)对象的insertBefore(newChild,referenceChild)方法和appendChild(newChild)方法，其主要功能和用法如下。

• appendChild()方法作为某节点的方法来调用，在该节点的子节点列表的结尾添加一个newChild。
• insertBefore()方法指定在 referenceChild 之前插入一个 newChild。在实际应用中，需要访问某个节点的双亲节点，以获得insertBefore()方法必要的信息。
• 如果已有节点“newNode=documentcreateElement(b’);”和节点“newText=document.createTextNode("Something to add!");”，经过 appendChild()方法结合后，会得到 HTML语句:“<b>Something to add</b>”。

<script type="text/javascript">
<!--
function makeNode(str)  //创建结点函数
{
var newParagraph = document.createElement("p");     //创建新元素p
var newText = document.createTextNode(str);         //创建新文本
newParagraph.appendChild(newText);                //追加一个新的子结点
return newParagraph;                               //返回该段落
}
function appendBefore(nodeId, str)  //前插入函数
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
if (node.parentNode)           //如果存在双亲结点
node.parentNode.insertBefore(newNode,node);  //在当前结点前插入新结点
}
function insertWithin(nodeId, str)  //中插入函数
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
node.appendChild(newNode);                   //追加一个新的子结点
}
function appendAfter(nodeId, str)  //后插入函数
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
if (node.parentNode)                    // 如果存在双亲结点
{ 
if (node.nextSibling)           //如果存在下一子结点
//前插入子结点
node.parentNode.insertBefore(newNode, node.nextSibling);
else //如果没有下一子结点
//后追加子结点
node.parentNode.appendChild(newNode);
}
}
//-->
</script>

分析

(1)程序首先创建了一个<d