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

傷城~ 2023-07-13 03:45 7阅读 0赞

三种动态创建元素的方法

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