insertAdjacentHTML()简介

insertAdjacentHTML() 方法是将文本解析为 element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。

insertAdjacentHTML() 是Element的API中的一个方法，可以将字符串文本转化为你想要的节点（Node），并且插入到你想要插入的位置中。而且它并不会向innerHTML一样会替换掉已有的节点，而是会插入到指定位置。

使用

element.insertAdjacentHTML(position,text)

参数
position，就是想要插入的位置，一共有4个固定的值
1、‘beforebegin’：元素element自己的前面。
2、‘afterbegin’：插入到元素element里面的第一个子节点之前（也就是总是会插入到最前面，例如我插入5个节点，顺序是1、2、3、4、5，那么我就需要以5、4、3、2、1的顺序插入，有一种栈结构先进后出的感觉）。
3、‘beforeend’：插入元素element里面的最后一个子节点之后（这个比较容易理解，就是插入到最后一个节点后，例如我插入5个节点，顺序是1、2、3、4、5，那 就正常的1、2、3、4、5就好啦，但是注意是在已有节点的后面哦）。
4、‘afterend’：元素element自己的后面。

参数text
第二个参数便是你想要插入的HTML语句，或者是XML形式也行，插入到DOM树中DOMString中
可以是字符串形式，也可以用ES6新增的模板字符串的形式

 root.insertAdjacentHTML("beforeend", ` <div class="box">${num}</div>`)

性能问题

注意尽量避免让用户输入文本或者HTML，这样会导致HTML编译器的转化，性能会低一点