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编译器的转化,性能会低一点

相关推荐
云知谷3 小时前
【HTML】网络数据是如何渲染成HTML网页页面显示的
开发语言·网络·计算机网络·html
昔人'7 小时前
`tanslate=“no“`避免使用 HTML 中的翻译属性自动翻译品牌名称等
html
执沐8 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
duandashuaige10 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
勤奋菲菲11 小时前
深入理解HTML文本标签:构建网页内容的基础
前端·html
昔人'11 小时前
html`<mark>`
前端·javascript·html
snow@li1 天前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
Dragonir1 天前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
aichitang20241 天前
欧拉拓扑学公式:几何与拓扑的交汇
html·拓扑学
urhero1 天前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序