js之DOM学习三种创建元素的方式

document.write() 了解

直接将内容写入页面的文档流，但是文档流执行完毕，会导致页面重绘，重新创建一个新的页面，只有新写入的这个元素，只有div了执行了之后

 var btn = document.querySelector('button');
        btn.onclick = function() {
            document.write('<div>123</div>');
        }

innerHTML

创建多个元素效率更高（不要采取拼接字符串，采取数组形式）

  var d1 = +new Date();
            var inner = document.querySelector('.inner');
            // for (var i = 0; i <= 100; i++) {
            //     inner.innerHTML += '<a href="#">百度</a>';
            // }时间21 这个是拼接字符串方式
            var arr = [];
            for (var i = 0; i <= 100; i++) {
                arr.push('<a href="#">百度</a>');
            } //改进 数组 2
            inner.innerHTML = arr.join('');
            // var create = document.querySelector('.create');
            // for (var i = 0; i <= 100; i++) {
            //     var a = document.createElement('a');
            //     a.innerHTML = '比好';
            //     create.appendChild(a);
            // } //时间 2 效率高

document.createElement()

创建了节点后，然后指明要添加到哪里去