三种动态创建元素区别

三种动态创建元素区别

• document.write()
  是直接将内容写入页面的内容流，但是文档执行完毕，则它会导致页面全部重绘
• element.innerHTML
  是将内容写入某个DOM节点，不会导致页面全部重绘
  创建多个元素效率更高（不要拼接字符，采取数组形式拼接），结构稍微复杂
• document.creatElement()创建多个元素效率稍微低一些，但是结构更清晰

//1.
var btn = document.querrySelector('button');
btn.onclick =function(){document.write('<div>123</div>');}
//会发生页面重绘

//2.innerHTML创建元素
var inner = document.querySelector('.inner');
for (var i=0; i<100;i++)
inner.innerHTML += '<a href="#">百度</a>'
//这种遍历的方式效率低
//下面这种数组的形式效率高
var creat = document.querrySelector('.create');
for(var i = 0; i<=100; i++){
    var a = document.createElement('a');
    create.appendChild(a);
    }

//3.document.creatElement()
var create = document.querySelector('.create');
var a = document.createElemrnt('a');
create.appendchild(a);