HTML页面中的内容1般都是事前编写好的，用阅读器打开页面的时候，直接加载到页面上面的。如果想在1个页面上有1些交互性的 *** 作，这时候候JavaScript就派上用处了。那如果想在展现好的HTML页面上动态增加段落内容或修改段落内容，OK，段落对象的@H_404_10@appendChild方法要派上用处了。
如上代码，展现出来是
如果想通过Add some text to the page 按钮给页面添加1些内容，那该如何 *** 作呢？
给Add some text to the page 按钮的单击事件绑定1个 *** 作，让这个 *** 作去给页面添加内容。
添加哪里的内容呢？姑且，我们就先添加按钮上方的输入框中的内容吧。
var inText =document.getElementByID("contentArea").value;
getElementByID 方法获得到的是contentArea 这个ID指向的对象，即页面上面的文本输入域。
拿到值以后该怎样办呢？需要创建1个文本节点，将内容接收。
var newText =document.createTextNode(inText);
拿到的文本节点后，还没法将其显示在页面上。
这时候候还需要将它作为段落内容添加在页面的节点上。段落内容，那先创建1个段落吧。
var newGraf =document.createElement("p");
这行代码创建了1个空的段落行，里面还没有内容。
段落对象中，有1个方法，叫做appendChild，是将文本节点信息绑定在段落上面的。
newGraf.appendChild(newText);
好了，内容绑定到段落上面了，但是段落似乎还是没有找到依附点啊。
我们就先把段落挂在form表单后面吧。如果form表单有ID属性的话（假定其ID为form1），我们就能够通过
var docForm = document.getElementByID("form1"); 来获得到form，但是form没有ID属性；假设form有name属性的话，我们也能够通过getElementsByname拿到同名的form数组，然后获得到我们需要的form，不巧，name属性也没有。
这时候，从哪里作为突破口呢？
获得document中对象的经常使用方法有3个，其中1个是通过tagname来获得的。tagname获得对象时既不需要ID属性，也不需要name属性，而是直接通过标签名称来获得对象的。
这里我们就通过form标签名来获得form对象。
document.getElementsByTagname("form")这个可以了吗？噢，忘了，通过tagname获得到的结果集是集合，是该标签名对象的集合，我们要获得的form是第几个呢？
第1个，那集合中就是第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方法传递1个参数，由依附点来调用，传递要挂载的段落；insertBefore 方法由document.body调用，传递两个参数，要挂在的段落内容 和 挂载的依附点名称，第1个参数为包括要添加内容的段落，第2个参数为依附点，行将第1个参数的段落插在第2个参数对象之前。
总结1下给HTML页面添加结点内容信息的步骤：
1 获得要添加的内容
2 将内容放在文本节点中
3 将文本节点放在段落中
4 将段落挂在页面的依附点上
总结
以上是内存溢出为你收集整理的javascript给html添加结点 *** 作全部内容，希望文章能够帮你解决javascript给html添加结点 *** 作所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）