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
