向 DOM 中增加新的元素—— Adding elements to the DOM

时间：2010-09-26 来源：功夫熊猫

为文档中添加新的DOM元素有时是很必要的。和把大象关冰箱一样，总共分三步：

第一步：创建一个你要添加的节点或元素(node/element)
第二步：要让DOM知道你想把它添加到文档中的哪个位置，即使用document.getElementById()或父亲，孩子节点来在document tree中定位父元素位置
第三步：是将这个新建的节点或元素添加到你想添加的位置上去，使用appendChild(),insertBefore()等方法

node节点可以表示为：文本、tag标签或一个DOM对象的属性，本教程都会涉及。

创建节点元素：

只需要调用一个文档对象(document object)的方法就可以很方便的创建一个节点。我们使用文档对象的createtextnode（）方法。document.createtextnode（文本内容）返回一个内部含有相应文本内容的节点(node)：

var txtNode = document.createTextNode("Hello. This is a new node.");

使用文档对象的createElement()方法可以很容易的创建一个dom元素对象，而为该元素对象的属性赋值可以使用该对象的setAttribute()方法。假设你想创建一个a标签，并为其href属性赋值，可以这样做：

ar link = document.createElement('a');
link.setAttribute('href', 'mypage.htm');

上面的例子将创建一个超链接，并将其指向mypage.htm(<A HREF=”mypage.htm”>)。你可以创建任何标签，这里我创建一个超链接是因为它很简单，不是吗？同时你也可以为任何你想设置的属性赋值，而不仅仅是href属性。假设你想再为其增加一个name属性，可以使用下面的语句：

link.setAttribute('name', 'myanchor');

现在你已经创建这个节点了，但是你看不到它，因为你还没有将它放入文档里面，我们稍候将介绍其操作过程。

定位新元素或节点放置的位置：

一旦你成功创建了一个你想要的node，你必须找到你想将其添加到document tree的哪个位置。document tree 代表文档对象模型中的所有的标签、属性和文本内容。要找出我们希望添加我们新的node(节点)在document tree中的位置，我们有两种方法：

为你在文档树中定位到的位置的元素加一个id属性
利用树形结构中的父亲和孩子来写定位

使用ID来定位我们在文档树中为我们的新节点选定的位置，我们可以使用document.getElementById(). 这将返回含有我们给定id的dom 对象(它可以是div也可以是p或者是span等等)。例如，我们要获取id为mydiv的div对象，我们使用如下的语法：

document.getElementById("myDiv");

如果你想使用文档的层级结构来定位文档树中的标签位置，那么你必须得熟悉 parent 和 child的概念。如果一个节点在另一个节点内容，那么，它被认为是外层节点元素的孩子。如果一个节点内有多个挨着的节点，那么该节点是其内部所有节点共同的父亲。例如，在有效的HTML文件中，除了HTML标签，其余标签都有父节点，因为它们都是放在HTML标签中(),大多数的HTML文档中，BODY节点都有许多孩子，因为至少其内部会放上一段文本。

一个document tree的形式如下：

document tree

使用parent,child这种层级结构定位dom对象，可以使用document.childNodes[]、document.nextSibling[]和document.parentNode[]. 例如，一个html文档的结构如下：

<HTML>
<HEAD>
<TITLE>My Document</TITLE>
</HEAD>
<BODY BGCOLOR="red">
<DIV ID="myDiv">
</DIV>
</BODY>
</HTML>

我们可以通过下面的步骤来定位到id为myDiv的div标签：首先，我们找到html标签的第二个孩子(BODY标签)，而我们要找的其实就是BODY标签的第一个孩子

document.childNodes[1].childNodes[0];

我们也可以换另一种思维来定位这个元素：首先，我们找到html标签的第一个孩子(HEAD标签)，然后找到HEAD标签的兄弟(BODY标签)，接着再找到BODY的第一个孩子

document.childNodes[0].nextSibling.childNodes[0];

也许你会问，在第一个例子中，为什么我们使用childNodes[1]来描述其第二个孩子呢，难道不是第一个吗？那是因为在JavaScript中，属性的值是以0开始的，0来代表他们的第一个孩子节点，1代表第二个，依此类推。

把新增加的节点、元素放入指定位置：

现在，新节点已经创建，其附加的位置也已经确定，最后一步，我们该将其添加到定位的元素位置中了。假设我们希望添加一个文本节点到id为”myDiv”的元素时，可以使用如下语句：

//首先我们创建了一个节点，并将其赋予一个名为txt的变量
var txt = document.createTextNode(" This text was added to the DIV.");
//先定位到id为myDiv的元素，然后向其内增加新创建的文本节点
document.getElementById('myDiv').appendChild(txt);

appendChild()方法中的不只可以放置文本节点，其他的节点也可以。我们使用文本节点只是为了显示当你了解这些方法后，这些操作是多么的容易。在第二行代码中，我们向div中增加了一块文本。下面我们使用另一种方式来向div末尾中添加一段新的文本：

<div id="mydiv" onClick="addtext(' This Text was added to the DIV.')" style="font:20px bold; cursor:hand">
Click here for example
</div>

在上面的例子中，我们使用appendChild()方法向div中增加了一段新的文本。它把新的文本增加到div的末尾，即div标签的闭合处(</div>)。如果我们需要添加到div标签的开始处，我们可以这样做：

insertBefore(txt,document.getElementById('myDiv').firstChild);

这将在div标签的开始处，增加文本节点。第二个参数是你要添新节点在哪个元素前的那个元素。在这个例子中，我们使用的是div节点的第一个子节点，这也就意味着我们新增的文本节点在div的第一个子节点前，也就是在div的开始处。

不要局限于div和文本节点，因为你可以向document文档中任何位置添加任何节点。