Node操作之三种动态创建元素的区别

1、document.write()创建元素，如果页面加载完毕，再调用这句话会导致页面重绘\

2、innerHTML 创建元素 \

3、document.createElement();创建元素 \

innerHTML字符串拼接测试

 <script>
  function fn(){
      var d1 +=new Date();
      var str ='';
      for(var i =0; i<1000;i++){
          document.body.innerHTML =='width:100px; height:2px; border:1px solid blue;</div>"';
      }
      var d2 +=new Date();
      console.log(d2-d1);
  }
  fn();
  //**结果:3012  、3002ms**
 </script>

innerHTML数组效率测试

<script>
    function fn(){
    var dl +=new Date();
    var array =[];
        for(var i =0; i <1000; i++){
            array.push('div style="width:100px; height:2px; border:1px solid blue;</div>"');
            document.body.innderHTML = array.join('');
            var d2 +=new Date();
            console.log(d2-d1);
        }
    }
    fn();
    //**结果：5 9 8 6ms**
</script>

createElement效率测试\

<script>
    function(){
        var d1 += newDate();
        for(var i =0; i<1000; i++){
            var div =document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border ='1px solid red';
            document.body.appendChild(div);
        }
        var d2 +=new Date();
        console.log(d2-d1);
    }
    fn();
    //**结果： 20 15 19ms**
</script>

经过以上测试，三种动态创建元素的区别如下：
1、document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘；
2、innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘；
3、innerHTML创建多个元素效率更高（不需要拼接字符串，采取数组形式拼接），结构稍微复杂；
4、createElement（）创建多个元素效率稍微低一点点，但是结构更清晰。
总结：不同浏览器下，innerHTML效率在不拼接字符的前提下比createElement高一些。