三种动态创建元素区别

• document.write()
• element.innerHTML
• document.createElement()

区别

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰
   总结：不同浏览器下，innerHTML 效率要比 creatElement 高

例子

document.write(),可以解析HTML，但它会导致页面全部重绘（一个新的HTML页面），之前的页面内容全部消失只剩write的内容

document.write('<div>123</div>')

element.innerHTML 创建元素

var inner = document.querySelector('.inner');
        // for (var i = 0; i <= 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>'
        // }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');

document.createElement() 创建元素

 var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }