原生js操作dom方法之insertAdjacentHTML

最新推荐文章于 2024-06-18 17:29:31 发布

转载最新推荐文章于 2024-06-18 17:29:31 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/112bc211c39e

文章标签：

#javascript #html #开发语言

javascript 同时被 2 个专栏收录

41 篇文章

订阅专栏

html

11 篇文章

订阅专栏

insertAdjacentHTML()方法用于在DOM树中解析并插入HTML或XML，避免了innerHTML操作可能引起的重新解析，提高了效率。该方法接受两个参数，分别指定位置和要插入的文本。例如，'afterend'会将内容插入元素自身之后。此方法适用于已存在于DOM树中的节点，并在浏览器中具有良好兼容性。

概述

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

语法

element.insertAdjacentHTML(position, text);

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

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

位置名称的可视化：

<!-- beforebegin --> 
<p> 
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

注意： beforebegin和afterend位置,仅在节点在树中且节点具有一个parent元素时工作.

eg

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>