宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-08-31

本文给出了一个用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编程有所帮助。

更多资讯
游戏推荐
更多+