document.write,innerHTML,createElement三者的区别

由于内容以及代码都是本人在便签写的,不是很规范,请参阅者见谅

document.write不常用,原因是会覆盖原本的页面内容,覆盖的原理是:默认情况下,页面加载会行成一个文档流,当页面内容加载完毕后,这个文档流(默认的文档流)就点触发某个事件,调用document.write向页面添加内容的时候就会形成一个新的文档流,就会覆盖原本的文档流
1.不覆盖的情况下:默认文档流未关闭
2.覆盖的情况下:默认文档流已关闭,形成新的文档流
innerHTML也不常用(性能问题,在100以内差别并不大)
console.log(document.head.innerHTML);
document.head.innerHTML += "<title>我是innerHTML</title>";
官方推荐:document.createElement("标签名")
特点:1.创建一个新的空便签
var p = document.createElement("p");
console.log(p);
2.创建值存在于内存中,需要手动添加到页面
p.innerHTML = "我是p标签";
document.body.appendChild(p);
使用document.createElement添加
<body>
<button id = "btn">点击添加</button>
<script>
var btn = dicument.getElementById("btn");
console.time();
btn.onclick=function(){
for(var i = 0;i < 100;i++){
var u = document.createElement("u");
u.innerHTML = "我是第"+ (i+1) + "个u标签";
document.body.appendChild(u);
}
console.timeEnd();
}
</script>
</body>

原文地址:https://www.cnblogs.com/zycs/p/12600818.html