三种创建元素的方式

Tutorial: DOM操作 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0 
<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>
    <button>点击</button>

    <p>abc</p>

    <div class="inner"></div>

    <div class="create"></div>

    <script>
      // window.onload = function () {
      //   document.write("<div>123</div>");
      // };

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

      // 2. innerHTML 创建元素
      var inner = document.querySelector(".inner");
      // for (var 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.innerHTML = 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>
  </body>
</html>
Prev: 动态生成表格 Next: 注册事件的两种方式