目录

insertAdjacentHTML() 作用

insertAdjacentHTML()简介

insertAdjacentHTML() 方法是将文本解析为 element 元素,并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接使用innerHTML操作更快。
insertAdjacentHTML() 是Element的API中的一个方法,可以将字符串文本转化为你想要的节点(Node),并且插入到你想要插入的位置中。而且它并不会向innerHTML一样会替换掉已有的节点,而是会插入到指定位置。

使用

bash 复制代码
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新增的模板字符串的形式

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

性能问题

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
WEI_Gaot25 分钟前
HTML列表
前端·html
WEI_Gaot26 分钟前
HTML表单
前端·html
freejackman1 小时前
web前端 html常用标签
前端·html
呦呦鹿鸣Rzh4 小时前
SpringMVC的请求-文件上传
java·前端·html
前端Hardy4 小时前
HTML&CSS:这个复选框打几分?
javascript·css·html
前端Hardy4 小时前
HTML&CSS:领导说这个开关能打99.99分
javascript·css·html
MartinRY6 小时前
SpringBoot将HTML转化成PDF文件
spring boot·pdf·html
阿里云云原生8 小时前
如何使用AI辅助开发HTML5 - 通义灵码功能全解析
云计算·html
倒霉男孩20 小时前
HTML5元素
前端·html·html5