三种动态创建元素区别

最新推荐文章于 2024-08-05 14:04:53 发布

原创最新推荐文章于 2024-08-05 14:04:53 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

三种动态创建元素区别

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);