DOM插入节点

Myth丶恋晨 2022-05-12 00:14 380阅读 0赞

一 介绍

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

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

obj.insertBefore(new,ref)

new：表示新的子节点。

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

二 应用

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

三 代码

  1. <head>
  2. <title>插入节点</title>
  3. <script language="javascript">
  4.  <!--
  5.  function crNode(str)
  6.  {
  7.     var newP=document.createElement("p");
  8.     var newTxt=document.createTextNode(str);
  9.     newP.appendChild(newTxt);
  10.     return newP;
  11.  } 
  12.  function insetNode(nodeId,str)
  13.  {
  14.      var node=document.getElementById(nodeId);
  15.      var newNode=crNode(str);
  16.      if(node.parentNode) //判断是否拥有父节点
  17.      node.parentNode.insertBefore(newNode,node); 
  18.  } 
  19.  -->
  20. </script>
  21. </head>
  22. <body>
  23.  <h2 id="h">在上面插入节点</h2>
  24.  <form id="frm" name="frm">
  25.  输入文本：<input type="text" name="txt" />
  26.  <input type="button" value="前插入" οnclick="insetNode('h',document.frm.txt.value);" />
  27.  </form>
  28. </body>

四 运行结果

fbf7425b-e554-3a99-9dd6-98105d23a023.png

发表评论

表情：
评论列表 （有 0 条评论，380人围观）

还没有评论，来说两句吧...

相关阅读

    相关 DOM删除节点

    一 介绍 删除节点通过使用removeChild()方法来实现。 removeChild()方法用来删除一个子节点。 obj. removeChild(oldChild)

    Bertha 。Bertha 。/ 0 赞/ 374 阅读

    相关 DOM插入节点

    一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 381 阅读