向 DOM 中增加新的元素—— Adding elements to the DOM
为文档中添加新的DOM元素有时是很必要的。和把大象关冰箱一样,总共分三步:
- 第一步:创建一个你要添加的节点或元素(node/element)
- 第二步:要让DOM知道你想把它添加到文档中的哪个位置,即使用document.getElementById()或父亲,孩子节点来在document tree中定位父元素位置
- 第三步:是将这个新建的节点或元素添加到你想添加的位置上去,使用appendChild(),insertBefore()等方法
node节点可以表示为:文本、tag标签或一个DOM对象的属性,本教程都会涉及。
创建节点元素:
只需要调用一个文档对象(document object)的方法就可以很方便的创建一个节点。我们使用文档对象的createtextnode()方法。document.createtextnode(文本内容)返回一个内部含有相应文本内容的节点(node):
使用文档对象的createElement()方法可以很容易的创建一个dom元素对象,而为该元素对象的属性赋值可以使用该对象的setAttribute()方法。假设你想创建一个a标签,并为其href属性赋值,可以这样做:
link.setAttribute('href', 'mypage.htm');
上面的例子将创建一个超链接,并将其指向mypage.htm(<A HREF=”mypage.htm”>)。你可以创建任何标签,这里我创建一个超链接是因为它很简单,不是吗?同时你也可以为任何你想设置的属性赋值,而不仅仅是href属性。假设你想再为其增加一个name属性,可以使用下面的语句:
现在你已经创建这个节点了,但是你看不到它,因为你还没有将它放入文档里面,我们稍候将介绍其操作过程。
定位新元素或节点放置的位置:
一旦你成功创建了一个你想要的node,你必须找到你想将其添加到document tree的哪个位置。document tree 代表文档对象模型中的所有的标签、属性和文本内容。要找出我们希望添加我们新的node(节点)在document tree中的位置,我们有两种方法:
- 为你在文档树中定位到的位置的元素加一个id属性
- 利用树形结构中的父亲和孩子来写定位
使用ID来定位我们在文档树中为我们的新节点选定的位置,我们可以使用document.getElementById(). 这将返回含有我们给定id的dom 对象(它可以是div也可以是p或者是span等等)。例如,我们要获取id为mydiv的div对象,我们使用如下的语法:
如果你想使用文档的层级结构来定位文档树中的标签位置,那么你必须得熟悉 parent 和 child的概念。如果一个节点在另一个节点内容,那么,它被认为是外层节点元素的孩子。如果一个节点内有多个挨着的节点,那么该节点是其内部所有节点共同的父亲。例如,在有效的HTML文件中,除了HTML标签,其余标签都有父节点,因为它们都是放在HTML标签中(),大多数的HTML文档中,BODY节点都有许多孩子,因为至少其内部会放上一段文本。
一个document tree的形式如下:
![document tree document tree](http://www.javascriptkit.com/javatutors/example.gif)
document tree
使用parent,child这种层级结构定位dom对象,可以使用document.childNodes[]、document.nextSibling[]和document.parentNode[]. 例如,一个html文档的结构如下:
<HEAD>
<TITLE>My Document</TITLE>
</HEAD>
<BODY BGCOLOR="red">
<DIV ID="myDiv">
</DIV>
</BODY>
</HTML>
我们可以通过下面的步骤来定位到id为myDiv的div标签:首先,我们找到html标签的第二个孩子(BODY标签),而我们要找的其实就是BODY标签的第一个孩子
我们也可以换另一种思维来定位这个元素:首先,我们找到html标签的第一个孩子(HEAD标签),然后找到HEAD标签的兄弟(BODY标签),接着再找到BODY的第一个孩子
也许你会问,在第一个例子中,为什么我们使用childNodes[1]来描述其第二个孩子呢,难道不是第一个吗?那是因为在JavaScript中,属性的值是以0开始的,0来代表他们的第一个孩子节点,1代表第二个,依此类推。
把新增加的节点、元素放入指定位置:
现在,新节点已经创建,其附加的位置也已经确定,最后一步,我们该将其添加到定位的元素位置中了。假设我们希望添加一个文本节点到id为”myDiv”的元素时,可以使用如下语句:
var txt = document.createTextNode(" This text was added to the DIV.");
//先定位到id为myDiv的元素,然后向其内增加新创建的文本节点
document.getElementById('myDiv').appendChild(txt);
appendChild()方法中的不只可以放置文本节点,其他的节点也可以。我们使用文本节点只是为了显示当你了解这些方法后,这些操作是多么的容易。在第二行代码中,我们向div中增加了一块文本。下面我们使用另一种方式来向div末尾中添加一段新的文本:
function addtext(what){
if (document.createTextNode){
var mytext=document.createTextNode(what)
document.getElementById("mydiv").appendChild(mytext)
}
}
</script>
Click here for example
</div>
在上面的例子中,我们使用appendChild()方法向div中增加了一段新的文本。它把新的文本增加到div的末尾,即div标签的闭合处(</div>)。如果我们需要添加到div标签的开始处,我们可以这样做:
这将在div标签的开始处,增加文本节点。第二个参数是你要添新节点在哪个元素前的那个元素。在这个例子中,我们使用的是div节点的第一个子节点,这也就意味着我们新增的文本节点在div的第一个子节点前,也就是在div的开始处。
不要局限于div和文本节点,因为你可以向document文档中任何位置添加任何节点。