标签：javascript appendchild insertbefore 表单 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 按钮的单击事件绑定一个操作，让这个操作去给页面添加内容。
添加哪里的内容呢？姑且，我们就先添加按钮上方的输入框中的内容吧。
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>
继续上面的代码，如果想把内容添加在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 将段落挂在页面的依附点上
标签：javascript appendchild insertbefore 表单 html
原文地址：http://blog.csdn.net/magi1201/article/details/43991157
