zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    简爱 灵魂所在
    charles抓取http/https
    Class.forName()用法
    ArrayList源码剖析
    java中的多线程
    分布式负载均衡缓冲系统,如何快速定位到是那个服务器
    maven依赖jar包时版本冲突的解决
    简单工厂模式设计(java反射机制改进)
    Fiddler 抓包工具使用详解
    Fiddler 使用
  • 原文地址:https://www.cnblogs.com/zycs/p/12600818.html
Copyright © 2011-2022 走看看