前端学习笔记之cloneNode()

      最近工作很忙,有段时间没学习我的代码了,昨天再打开看,发现很多之前很烂熟的东西居然也变得模糊。正好之前一直跃跃欲试想参加的“先行者计划”论坛竟然可以看到老师布置的练习题目了,于是还是决定跟着论坛一起做题吧,每天坚持前进一小步,希望自己能早日转行前端。
昨天做了第一个题,题目如下:
      

      这个题还算简单,“克隆五次”我想到了for循环,cloneNode()方法之前在学习js基础时还有印象,只是已经不太记得括号内应该放什么参数了,然后看到cloneNode()时想起了jQuery中同样功能的clone(),同样还是对参数不太清楚。然后就正好查了一下,顺便加深一下记忆。
cloneNode()方法,是DOM中克隆节点的方法,接收boolean类型的参数,也不可以不设置参数,不设置参数时默认为false。参数设置为true时,表明克隆节点及其属性以及后代;参数设置为false时,表明克隆节点本身。事件方法应该也算是一种属性吧,所以在参数为true的情况下,绑定的事件应该也要被克隆。
      关于jQuery中的clone(),也接收true和false参数,用法同上,只是它只适用于jQuery对象。
      虽然看起来简单,但是写起代码来还是耗了一番心力的,我做的答案如下, 虽然性能发面还有需要优化的地方。
<script>

    window.onload=function(){
           var div=document.getElementById("div_0");
           var main=document.querySelector("#main");
           for(var i=0; i<5; i++){
                 var clone=div.cloneNode(true);

                 main.appendChild(clone);

           }

      }

</script>

不过在论坛里,发现有一位同学写得特别棒,使用了createDocumentFragment文档碎片,大大提高了效率。代码摘录过来,以便学习。

<script>
      var node="";
      var fragment = document.createDocumentFragment();
      for (var i = 1; i <= 5; i++) {
            node=document.getElementById("div_0").cloneNode(true);
            fragment.appendChild(node);
      }
      document.getElementById("main").appendChild(fragment);
</script>

    

原文地址:https://www.cnblogs.com/vivian2016/p/5800058.html