javascript给html添加结点操作

html页面中的内容一般都是事先编写好的，用浏览器打开页面的时候，直接加载到页面上面的。如果想在一个页面上有一些交互性的操作，这时候javascript就派上用场了。那如果想在展现好的html页面上动态增加段落内容或修改段落内容，OK，段落对象的appendChild方法要派上用场了。

<html>
	<head>
		<title>Adding Nodes</title>
	</head>
	<body>
		<form action="#">
			<p><textarea id="contentArea" rows="5" cols="30"></textarea></p>
			<input type="button" value="Add some text to the page">
		</form>
	</body>
</html>

如上代码，展现出来是

如果想通过Add some text to the page 按钮给页面添加一些内容，那该如何操作呢？

给Add some text to the page 按钮的单击事件绑定一个操作，让这个操作去给页面添加内容。

结点后添加
appendChild

获取要添加内容

添加哪里的内容呢？姑且，我们就先添加按钮上方的输入框中的内容吧。

var inText =document.getElementById("contentArea").value;

getElementById 方法获取到的是contentArea 这个id指向的对象，即页面上面的文本输入域。

将内容放在文本结点中

拿到值之后该怎么办呢？需要创建一个文本节点，将内容接收。

var newText =document.createTextNode(inText);

拿到的文本节点后，还无法将其显示在页面上。

将文本结点放在段落中

这时候还需要将它作为段落内容添加在页面的节点上。段落内容，那先创建一个段落吧。

var newGraf =document.createElement("p");

这行代码创建了一个空的段落行，里面还没有内容。

段落对象中，有一个方法，叫做appendChild，是将文本节点信息绑定在段落上面的。

newGraf.appendChild(newText);

将段落挂载在页面依附点上

好了，内容绑定到段落上面了，但是段落似乎还是没有找到依附点啊。

我们就先把段落挂在form表单后面吧。如果form表单有id属性的话（假设其id为form1），我们就可以通过

var docForm = document.getElementById("form1"); 来获取到form，但是form没有id属性；假如form有name属性的话，我们也可以通过getElementsByName拿到同名的form数组，然后获取到我们需要的form，不巧，name属性也没有。

这时，从哪里作为突破口呢？

获取document中对象的常用方法有三个，其中一个是通过tagName来获取的。tagName获取对象时既不需要id属性，也不需要name属性，而是直接通过标签名称来获取对象的。

这里我们就通过form标签名来获取form对象。

document.getElementsByTagName("form")这个可以了吗？噢，忘了，通过tagName获取到的结果集是集合，是该标签名对象的集合，我们要获取的form是第几个呢？

第一个，那集合中就是第0个了，即document.getElementsByTagName("form")[0]。

好了，那我们的代码就是var docForm = document.getElementsByTagName("form")[0];

拿到段落要挂载的依附点后，需要将段落挂载在依附点上。

这时，需要再次用appendChild方法了，即
docForm.appendChild(newGraf)。

整理后的完整代码为：

<html>
	<head>
		<title>Adding Nodes</title>
	</head>
	<body>
		<form action="#">
			<p><textarea id="contentArea" rows="5" cols="30"></textarea></p>
			<input type="button" value="Add some text to the page" onclick="addNodes()">
		</form>

		<script>
			function addNodes() {
				var inText = document.getElementById("contentArea").value;
				var newText = document.createTextNode(inText);

				var newGraf = document.createElement("p");
				newGraf.appendChild(newText);

				var docForm = document.getElementsByTagName("form")[0];
                docForm.appendChild(newGraf);
			}
		</script>
	</body>
</html>

结点前添加insertBefore

继续上面的代码，如果想把内容添加在form表单前面呢？

变动比较小，将docForm.appendChild(newGraf);

换为document.body.insertBefore(newGraf, docForm); 就可以了。

document.body 指的是document对象的body子对象，即html页面上面的body标签域。

insertBefore 方法与 appendChild 方法不同：appendChild方法传递一个参数，由依附点来调用，传递要挂载的段落；insertBefore 方法由document.body调用，传递两个参数，要挂在的段落内容和挂载的依附点名称，第一个参数为包含要添加内容的段落，第二个参数为依附点，即将第一个参数的段落插在第二个参数对象之前。

总结一下给html页面添加结点内容信息的步骤：

1 获取要添加的内容

2 将内容放在文本节点中

3 将文本节点放在段落中

4 将段落挂在页面的依附点上