创建动态创建元素的区别-CFANZ编程社区

创建动态创建元素的区别

   document.write();
    element.innerHTML;
    document.createElement();
    区别
    document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
    innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
    innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接)，结构稍微复杂
    creatElement( )创建多个元素效率稍低一点点，但是结构更清晰
    总结：不同浏览器下，innerHTML 效率要比 creatElement高

    window.onload = function () {
      document.write("<div>123</div>");
    };
    三种创建方式区别
    1.document.write( )创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
    var btn = document.querySelector("button");
    btn.onclick = function () {
      document.write("<div>456</div>");
    };

<body>
    <button>按钮</button>
    <div class="inner"></div>
    <div class="create"></div>
  </body>
  <script>
      var inner = document.querySelector(".inner");
    // for (let i = 0; i < 100; i++) {
    //   inner.innerHTML += "<a href='#'>百度</a>";
    // }
    var arr = [];
    for (var i = 0; i <= 100; i++) {
      arr.push("<a href='#'>百度</a>");
    }
    inner.innHTML = arr.join("");

    // 3.document.createElement( ) 创建元素
    var create = document.querySelector(".create");
    for (var i = 0; i <= 100; i++) {
      var a = document.createElement("a");
      create.appendChild(a);
    }
  </script>

0 条评论