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标签域。
勇士面前无险路。
