Four ways to create a front-end elements

**document.write

1. html code
   <button>点击</button>
2. js code

// 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        var btn = document.querySelector('button');
        btn.onclick = function() {
            document.write('<div>123</div>');
        }

** 2 innerHTML create elements

1. innerHTML mosaic type

<script>
    function fn() {
        var d1 = +new Date();

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

• innerHTML array type

<script>
    function fn() {
        var d1 = +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.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

3 document.createElement () create elements

<script>
    function fn() {
        var d1 = +new Date();

        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();
</script>

4 document.createDocumentFragment();****

 //使用了createDocumentFragment()的程序
    var d3 = new Date();
    var pFragment = document.createDocumentFragment();
    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';
       		pFragment.appendChild(div);
    }
    document.body.appendChild(pFragment);
    var d4 = new Date();
    document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

These four elements are created,

• createDocumentFragment () fastest
• followed by an array of innerHTML
• createElement third,
• innerH fourth string
• document.write()最慢