三种创建元素方式区别

Posted 2020-11-16 qtbb

1. document.write( )

　如果页面文档流加载完毕，再调用这句话会导致页面重绘（根据 document.write()写入的内容，生成新的页面)

2.element.innerhtml

　innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

　例：

　　var  array = [ ];

　　for( var i = 0; i < 1000; i++ ){

　　　　array.push(" <div style=‘width:100x;height:10px; border:1px solid red;‘ ></div> ");

　　}

　　document.body.innerHTML = array.join(‘‘);  //  速度在10秒内

3.document.createElement()

　创建多个元素效率稍微低一点，但是结构清晰

总结：不同浏览器下 innerHTML 效率比 createElement  高