DOM复制节点

一时失言乱红尘 2022-05-12 00:14 349阅读 0赞

一 介绍

复制节点可以使用cloneNode()方法来实现。

cloneNode()方法用来复制节点。

obj.cloneNode(deep)

deep：该参数是一个Boolean值，表示是否为深度复制。

深度复制是将当前节点的所有子节点全部复制，当值为true时表示深度复制。

当值为false时表示简单复制，简单复制只复制当前节点，不复制其子节点。

二 应用

复制节点，本示例在页面中显示了一个下拉列表框和两个按钮，当单击“复制”按钮时只复制了一个新的下拉列表框，并未复制其选项。

当单击“深度复制”按钮时将会复制一个新的下拉列表框并包含其选项。

三 代码

  1. <head> 
  2. <title>复制节点</title> 
  3. <script language="javascript"> 
  4.  <!--
  5.  function AddRow(bl)
  6.  {
  7.      var sel=document.getElementById("sexType");
  8.      var newSelect=sel.cloneNode(bl); 
  9.      var b=document.createElement("br");
  10.      di.appendChild(newSelect); 
  11.      di.appendChild(b); 
  12.  } 
  13.  --> 
  14. </script> 
  15. </head> 
  16. <body> 
  17. <form> 
  18.  <hr>
  19.  <select name="sexType" id="sexType"> 
  20.  <option value="%">请选择性别</option> 
  21.  <option value="0">男</option> 
  22.  <option value="1">女</option> 
  23.  </select> 
  24.  <hr>
  25. <div id="di"></div> 
  26. <input type="button" value="复制" onClick="AddRow(false)"/>
  27. <input type="button" value="深度复制" onClick="AddRow(true)"/>
  28. </form> 
  29. </body>

四 运行结果

d5a604d6-bc72-3826-81c4-3edc227e517a.png

发表评论

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

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

相关阅读

    相关 DOM删除节点

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

    Bertha 。Bertha 。/ 0 赞/ 369 阅读

    相关 DOM插入节点

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

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