添加DOM节点

本节介绍使用标准的DOM方法向文档中添加节点，用到了createElement、createTextNode以及appendChild等方法。

前面我们通过innerHTML来改变文档的内容，当然也可以用它来添加节点。下面我们来看另外一种想文档中添加节点的方式——使用标准的DOM方法。

使用DOM方法修改文档比使用innerHTML要麻烦一些，我们先来看一段示例HTML代码：

<div id="test" style="border:1px solid"></div>

使用DOM方法添加一个段落节点的思路如下：

  1. 创建一个p节点
  2. 穿件一个文本节点，并且添加到p节点中
  3. 将p节点添加到div中

实例JavaScript代码

按照上面的思路我们得出如下的JS代码：

<script type="text/javascript">
function test(){
	var test = document.getElementById("test");
	var para = document.createElement("P");
	var text = document.createTextNode("要添加的文本");
	para.appendChild(text);
	test.appendChild(para);
}	
</script>

添加节点的效果

下面就是原来的div，由于没有内容，我们只能看到边框。

，点击这个按钮就可以运行上面的代码。可以看到上面的div里多出了我们创造的段落节点。

代码解释

首先，我们用到了var para = document.createElement("P");该语句创建了一个段落节点，但是它并不会马上出现在文档中。要创建其它节点，只需要吧传递给该函数的字符串参数修改一些即可，例如document.createElement("DIV")。

var text = document.createTextNode("要添加的文本");一句创建了一个文本节点。

para.appendChild(text);将text作为子结点添加到para这个段落节点上。很容易看出，appendChild的调用语法如下：父节点.appendChild.(子结点)。

最后一句test.appendChild(para);则将段落节点para添加到test这个div节点上，由于test节点原来就是文档的一部分，这一句会造成文档的更新，也就是我们会看到段落文字被添加到了div节点里。

菜鸟的HTML DOM笔记目录

  1. DOM可以做什么？
  2. DOM的结构
  3. 访问DOM节点1——getElementById()
  4. 访问DOM节点2——getElementsByTagName()
  5. 访问DOM节点3——通过节点关系
  6. DOM节点信息
  7. DOM信息nodeType的应用
  8. 修改DOM——innerHTML
  9. 删除DOM节点——removeChild
  10. 添加DOM节点
  11. DOM简介总结