前端学习笔记之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>