insertAdjacentHTML和innerHTML

insertAdjacentHTML和innerHTML

innerHTML大家都很熟悉了，可以直接重绘dom结构

那么这个insertAdjacentHTML有什么用呢

insertAdjacentHTML

它可以往某个DOM元素里添加元素(不只是添加子元素，也可以添加到同级)

那我们为什么不直接用innerHTML呢？

请往下看

innerHTML的缺点

首先大家要知道innerHTML它在使用的时候，他会有一个把之前结构给清空这样一个过程，然后再去添加，如果我们数据比较多的话那么innerHTML会非常占资源，而且非常慢，大家可以自己测试一下

let box = document.getElementsByClassName('box')[0]
    
    for(let i=0;i<=10000;i++){
      box.innerHTML+=`<p>${i}</p>`
    }

这才1w次，就跟死循环了一样，

那我们试试用insertAdjacentHTML

    let box = document.getElementsByClassName('box')[0]
    for(let i=0;i<=100000;i++){
      box.insertAdjacentHTML('beforeend',`<p>${i}</p>`)
    }

哪怕是10w次，也是1s左右就加载出来，可以帮助我们优化性能

那么insertAdjacentHTML如何使用？

insertAdjacentHTML的使用

语法：

element.insertAdjacentHTML(position, text);

text就是要插入的字符串，可以包涵dom节点。

那么position的参数如下

position是相对于元素的位置，并且必须是以下字符串之一：

• beforebegin: 元素自身的前面。
• afterbegin: 插入元素内部的第一个子节点之前。
• beforeend: 插入元素内部的最后一个子节点之后。
• afterend: 元素自身的后面。
  text是要被解析为HTML或XML,并插入到DOM树中的字符串

img