JS实现的DOM插入节点操作示例

本文给出了一个用JS实现DOM插入节点操作的例子。分享给大家参考，如下：

一个介绍

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

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

插入前(新，参考)

New:表示新的子节点。参考：指定一个节点，并在此节点之前插入一个新节点。

第二次申请

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

三个完整的示例代码：

！一个doctype htmlhtmlheadtitlewww.jb51.net插入一个节点/标题脚本语言=' JavaScript '！-function CrNode(str){ var NewP=document . CreateElement(' p ')；var newTxt=document . createtextnode(str)；newp . appendchild(NewTxt)；返回newP}函数insetNode(nodeId，str){ var node=document . getelementbyid(nodeId)；var new node=CrNode(str)；If(node.parentNode) //判断是否有父节点。parentnode。insertbefore(新节点，节点)；}-/script/head body H2 id=' h ' insert node over/H2 form id=' frm ' name=' frm '输入文本：input type=' text ' name=' txt '/input type=' button ' value=' insert ' onclick=' insert node(' h ')//form/body/html四个运行结果

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010

希望本文对JavaScript编程有所帮助。