JavaScript中三种动态创建元素的区别

三种动态创建元素的方法

1.document.write('')
2.element.innerHTML=''
3.document.createElement('')

区别：
使用document.write是直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘制
比如

 window.onload = function () {
            document.querySelector('.btn00000').onclick = function () {
                document.write("<h1>ssss</h1>")
            }
        }

点击class为btn00000的按钮，文档内容会重新绘制，最后只剩下 document.write的内容
使用element.innerHTML方法

 var innner=document.querySelector('.inner')
        console.log(innner)
        innner.innerHTML='<a href="#">百度</a>'

document.createElement创建元素不会立即添加到文档，需要先获取添加的父元素，然后通过appendChild或insertBefore等方法插入

 //添加节点
 	var li21 = document.createElement('li')
    li21.innerHTML = 'li21'
    ul2.appendChild(li21)
    var li20 = document.createElement('li')
    li20.innerHTML = 'li20'
    ul2.insertBefore(li20, li21)

关于creatElement和innerHTML区别
创建单个元素时候，几乎没有区别，这时候我们创建大量元素来测试两者的区别

 var innner = document.querySelector('.inner')
        console.log(innner)

        var d1= +new Date()
        for (var i = 0; i < 1000; i++) {
            var aaa = document.createElement('a')
            aaa.href = '#'
            aaa.innerHTML = '百度1'
            aaa.style.color='yellow'
            innner.appendChild(aaa)
        }
       var d2= +new Date()
        console.log((d2-d1) +'ms')

        d1= +new Date()
        for (var i = 0; i < 1000; i++) {
            innner.innerHTML += '<a href="#">百度</a>'
        }
        d2= +new Date()
        console.log((d2-d1) +'ms')

打印结果我们发现createElement效率高，但是此时，innerHTML我们是采用拼接字符串的方式，拼接字符串时候，每次都会new一个StringBuilder，浪费严重，如果我们采取数组的方式

 var d1= +new Date()
        var arr=[]
        for (var i = 0; i < 1000; i++) {
            //innner.innerHTML += '<a href="#">百度</a>'//拼接字符串效率不如createElement效率高
            arr.push('<a href="#">百度</a>')//采用数组的方式比拼接字符串效率高，比createElement效率高
        }
        innner.innerHTML=arr.join('')
        var d2= +new Date()
        console.log((d2-d1) +'ms')

最后比较得出innerHTML方式如果采用数组方式时候速度要快于createElment，如果采用拼接字符串的时候，速度要鳗鱼createElement