js DOM中三种动态创建元素的区别
2022-07-21 本文已影响0人
前端末晨曦吖
document.write()
直接将内容写入页面的内容流, 但是文档执行完毕, 则会导致页面的全部重绘。
具体用法：
<body>
<button>点击事件</button>
<p>abc</p>
<script>
// 三种创建元素的方式区别:
var btn = document.querySelect('button');
btn.onClick = function() {
document.write('<div>123</div>')
}
</script>
</body>
innerHTML
是将内容写入DOM 某个节点, 不会导致页面的重绘。
innerHTML 创建多个效率更高, 结构稍微复杂。
不同浏览器下, innerHTML 效率要比createdElement 高
<script>
function fn() {
var d1 = +newDate();
var str = "";
for(var i= 0; i< 1000; i++) {
document.body.innerHTML += "<div style = "width: 100px; height: 2px; border: 1px solid blue"></div>"
}
var d2 = +new Date();
console.log(d2 - d1);
}
</script>
document.createElement()
创建多个元素效率稍微低一些, 但是结构更加清晰。
<script>
function fn () {
var d1 = +new Date();
for(var i = 0; i<1000; i++) {
var div = document.createdElement('div');
div.style.width = "100px";
div.style.height = "2px"
div.style.border = "1px solid red";
document.body.appendChild(div)
}
var d2 = +new Date();
console.log(d2 - d1);
}
</script>
