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

三种创建元素方式区别

  1. document.write()创建元素
  2. innerHTML 创建元素
  3. document.createElement()创建元素

document.write() 创建元素

<body>
  <button>clickbutton>
  <p>abcp>
  <script>
    // 1. document.write()创建元素
    document.write('
123
'
)
script> body>

看黑马程序员学习JavaScript之三种创建元素方式区别_第1张图片使用document.write()简单直接添加内容还是没什么问题的,不过当文档流已经渲染后再调用它的话,则会导致页面全部重绘
看黑马程序员学习JavaScript之三种创建元素方式区别_第2张图片

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

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

innerHTML 创建元素

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

看黑马程序员学习JavaScript之三种创建元素方式区别_第3张图片

document.createElement() 创建元素

<body>
  <button>clickbutton>
  <p>abcp>
  <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() 它也能创建元素
看黑马程序员学习JavaScript之三种创建元素方式区别_第4张图片成功创建了a标签

谈innerHTML和createElement的效率

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

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

看黑马程序员学习JavaScript之三种创建元素方式区别_第5张图片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>

看黑马程序员学习JavaScript之三种创建元素方式区别_第6张图片同样是1000次createElement 仅用5毫秒就完成了
3. innerHTML 数组效率测试

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

看黑马程序员学习JavaScript之三种创建元素方式区别_第7张图片反复刷新好几次innerHTML用数组形式创建多个元素效率最高速度最快。

总结三者区别

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

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

你可能感兴趣的:(javascript,学习,前端)