• 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>

  • 相关阅读:
    3.18日
    线程的面试题
    关于instanceof测试遇到的问题
    spring
    自动登录代码
    Filter
    多态
    基于HTML,css,jQuery,JavaScript,MySQL搭建博客系统
    基于bootstrap+MySQL搭建动态网站
    基于bootstrap_网站汇总页面
  • 原文地址:https://www.cnblogs.com/zycs/p/12600818.html
Copyright © 2020-2023  润新知