/* 三种动态创建元素的区别 */
// 1 document.write()
// 特点 是直接将内容写入页面的文档流，但是文档流执行完毕，则它会导致页面全部重绘
var btn = document.querySelector(‘button‘);
btn.onclick = function() {
document.write(‘<div>123</div>‘)
}
//2 element.innerHTML的方式
var div = document.querySelector(‘div‘)
for(var i=0; i < 100; i++){
div.innerHTML += ‘<a href="#">百度</a>‘
}
//执行效率极低，主要是因为使用了大量的字符串拼接，内存中需要重新开辟空间
//3 document.creatElement()
for(var i=0; i<100; i++){
var a = document.createElement(‘a‘);
div.appendChild(a);
}
// 执行效率高 比通过innerHTML方式好很多 下面是重点 下面是重点 下面是重点
/* 接下来剧情反转的时刻到来 */
var arr = [];
for(var i=0; i<100; i++ ){
arr.push(‘<a href="#">百度</a>‘);
}
div.innerHTML = arr.join(‘‘);
//这种方式 执行效率更高
/* 总结一下
1，document.write() 会导致页面重绘，不建议使用
2，inner.HTML 创建多个元素是效率会更高（不拼接字符串，采取数组形式拼接），但结构稍微复杂
3，createElement（） 创建多个元素效率比innerHTML低，但结构清晰
*/
