JS 3种创建元素节点方法的区别

1.document.write('元素名')

这种方法 直接将内容写入页面内容流 但是文档执行完毕 他会导致页面重新绘制 也就是说页面渲染之后 加入点击按钮调用document.write('') 创建元素的话 会重新绘制页面 其他原本元素会消失

    let btn = document.querySelector('button')
    let div = document.querySelector('.content')

    btn.onclick = function () {
        document.write('<div>我也觉得!</div>')  //直接重新绘制 原本元素完全消失
    }

2.document.innerHTML

(1).采用字符串拼接方式 因为字符串拼接耗时间 创建多个则时间变长 且由于字符串不可变性 使得内存消耗巨大

    for (let i = 0;i<100;i++){

       div.innerHTML += '<a>是的!</a>'

    }

(2).采用数组形式创建arr.join('') arr中存储'元素语句' 测试可得 采用此种方式效率最高！

    let arr = []
    
    for(let i = 0;i < 100;i++){
        arr.push('<a>哇瑟瑟</a>')
    }
    
    div.innerHTML += arr.join('')

3.document.createElement('') 创建数量过多时效率没有innerHTML数组创建效率高

    let a = document.createElement('a')
    a.innerHTML = '真的'
    div.appendChild(a)