看黑马程序员学习JavaScript之三种创建元素方式区别

赵云澜

已于 2022-09-20 15:57:06 修改

阅读量647

点赞数

文章标签： javascript 学习前端

于 2022-09-20 15:55:09 首次发布

本文链接：https://blog.csdn.net/weixin_46278178/article/details/126952170

版权

三种创建元素方式区别

document.write()创建元素
innerHTML 创建元素
document.createElement()创建元素

document.write() 创建元素

<body>
  <button>click</button>
  <p>abc</p>
  <script>
    // 1. document.write()创建元素
    document.write('<div>123</div>')
  </script>
</body>

在这里插入图片描述使用document.write()简单直接添加内容还是没什么问题的，不过当文档流已经渲染后再调用它的话，则会导致页面全部重绘

<body>
  <button>click</button>
  <p>abc</p>
  <script>
    // 1. document.write()创建元素
    var btn = document.querySelector('button')
    // 点击buton后再生成一个元素
    btn.onclick = function () {
      document.write('<div>123</div>')
    }
  </script>
</body>

因为实际开发中不常使用此方法

innerHTML 创建元素

<body>
  <button>click</button>
  <p>abc</p>
  <div class="inner"></div>
  <div class="create"></div>
  <script>
    // 三种创建元素方式区别
    // 2. innerHTML 创建元素
    var inner = document.querySelector('.inner')
    inner.innerHTML = "<a href='#'>innerHTML</a>"
  </script>
</body>

在这里插入图片描述

document.createElement() 创建元素

<body>
  <button>click</button>
  <p>abc</p>
  <div class="inner"></div>
  <div class="create"></div>
  <script>
    // 三种创建元素方式区别
    // 3. document.createElement()创建元素
    // 获取父节点
    var create = document.querySelector('.create')
    // 创建需要添加的元素
    var a = document.createElement('a')
    // 添加到父节点内
    create.appendChild(a)
  </script>
</body>

document.createElement() 它也能创建元素
在这里插入图片描述成功创建了a标签

谈innerHTML和createElement的效率

1. innerHTML 拼接需要花费多少时间

  <script>
    function fn (){
      // 获取到当前的时间戳 方法开始的时间
      var d1 = +new Date()
      var str = ''
      // 这个的最大值别太大啦。
      for(var i = 0; i < 1000; i++){
        document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
      }
      // 方法结束时间
      var d2 = +new Date()
      console.log(d2-d1)
    }
    fn ()
  </script>

在这里插入图片描述 innerHTML 创建拼接元素1000次需要花费大概800毫秒的样子 注意：大家测试的时候千万别输入特别大的测试值

2. createElement 拼接需要花费多少时间

  <script>
    function fn() {
      // 方法开始时间
      var start = +new Date()
      for(var i = 0 ; i < 1000; i++){
        var div = document.createElement('div')
        div.style.width = '100px'
        div.style.height = '2px'
        div.style.border = '1px solid red'
        document.body.appendChild(div)
      }
      var end = +new Date()
      console.log(end - start);
    }
    fn()
  </script>

在这里插入图片描述同样是1000次createElement 仅用5毫秒就完成了
3. innerHTML 数组效率测试

<script>
  function fn() {
   var d1 = +new Date();
   // 开辟一个空数组
   var array = [];
   for (var i = 0; i < 1000; i++) {
       // 在每个数组后追加一个新数组
       array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
  }
        // 转换成字符串给页面
  	document.body.innerHTML = array.join('');
    var d2 = +new Date();
    console.log(d2 - d1);
}
    fn();
</script>

在这里插入图片描述反复刷新好几次innerHTML用数组形式创建多个元素效率最高速度最快。

总结三者区别

document.write() 虽然能实现创建元素效果，但适用性不强，若把它放置事件或文档流已经渲染后再调用它，则会将页面重绘。因此不推荐使用
element.innerHTML 是将内容写入到某个DOM节点，不会重绘页面的问题，虽然创建过程简单，但普通的创建会在拼接字符串过程中花费不少时间。它的第二种方式以数组形式拼接效率更高，到结构稍微复杂。因此在大量元素需要创建时采用innerHTML数组形式。
document.createElement() 创建多个元素效率相比innerHTML数组形式效率稍微低一些，但结构比较清晰。

在任何浏览器下，innerHTML只要采取数组形式效率都要比createElement 高