JS day35 三种动态创建元素的区别

1.document.write()
直接将内容写入页面的内容流.当文档流加载完毕时,调用它会导致页面全部重绘

document.write('<div>123</div>')  //创建div标签

2.element.innerHTML
创建多个元素效率更高(不采取拼接字符串,采取数组形式),结构稍复杂

①拼接字符串创建1000个a标签,效率低

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

②采取数组形式,创建1000个a标签,效率高

            var a=+ new Date;
            var div=document.querySelector('div');
            var arr=[];
            for(var i=0;i<=1000;i++){
                arr.push('<a href="#">百度</a>');  //给数组添加1000个标签a
            }
            div.innerHTML=arr.join('');  //将数组中的所有元素放入一个字符串赋值给div   
            var b=+ new Date;
            console.log(b-a);  //查看所用时间

3.document.createElement()
效率一般,结构清晰

   document.createElement('div');  //创建div标签