JavaScript-179：三种创建元素

效果图

总结：不同浏览器下，innerHTML 采取数组的方式效率要比 createElement 高

结构

    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>

1. document.write()

document.write() 创建元素 如果页面文档流加载完毕，则它会导致页面全部重绘

        window.onload = function ()
        {  // 当页面加载完毕之后 加载 JS
            // document.write('<div>123</div>')
        }
        // 1. document.write() 创建元素 如果页面文档流加载完毕，在调用这句话会导致页面重绘

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

2. innerHTML 创建元素

innerHTML 是将内容写入某个 DOM 节点中，不会导致页面全部重绘。 创建多个元素效率更高(不要拼接字符串 采取数组形式拼接) 结构稍微复杂

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

3. document.createElement() 创建元素

document.createElement() 创建多个元素效率稍微低一点 但是结构更清晰

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