DOM插入节点

来源：互联网发布：java线程间通信方式编辑：程序博客网时间：2024/04/27 19:14

一介绍

插入节点通过使用insertBefore()方法来实现。

insertBefore()方法将在另一个子节点前插入新的子节点。

obj.insertBefore(new,ref)

new：表示新的子节点。

ref：指定一个节点，在这个节点前插入新的节点。

二应用

插入节点，本示例在页面的文本框中输入需要插入的文本，然后通过单击“前插入”按钮将文本插入到页面中。

三代码

<head><title>插入节点</title><script language="javascript"> <!-- function crNode(str) {var newP=document.createElement("p");var newTxt=document.createTextNode(str);newP.appendChild(newTxt);return newP; }  function insetNode(nodeId,str) { var node=document.getElementById(nodeId); var newNode=crNode(str); if(node.parentNode) //判断是否拥有父节点 node.parentNode.insertBefore(newNode,node);  }  --></script></head><body> <h2 id="h">在上面插入节点</h2> <form id="frm" name="frm"> 输入文本：<input type="text" name="txt" /> <input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" /> </form></body>

四运行结果

查看图片附件

0 0