JS DOM 编程复习笔记 -- insertAdjacentHTML（九）

理解DOM操作：insertAdjacentHTML()及其兄弟方法

最新推荐文章于 2022-04-08 00:16:13 发布

原创最新推荐文章于 2022-04-08 00:16:13 发布 · 215 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

小帅的编程笔记专栏收录该内容

117 篇文章

订阅专栏

本文介绍了DOM操作中的insertAdjacentHTML()方法，用于在元素周围插入HTML内容。方法接受两个参数，分别定义插入位置和HTML文本。此外，还提到了与之类似的insertAdjacentElement()和insertAdjacentText()方法。文中通过示例展示了如何使用这些方法，并提醒在处理用户输入时应注意安全问题，避免XSS攻击。最后，提供了一个实际示例展示如何使用insertAdjacentHTML()方法动态添加HTML结构。

今天我们来复习最后一个关于DOM操作的API，insertAdjacentHTML()，用来将HTML插入到页面中。同样还有两个差不多的方法，insertAdjacentElement()和insertAdjacentText()，他们的用法差不多，只是第二个参数有些区别。

语法

insertAdjacentHTML() 是 Element 接口的一个方法，任何元素都可以调用。

insertAdjacentHTML() 方法解析一段 HTML 文本并将结果节点插入到 DOM 树的指定位置。

element.insertAdjacentHTML(positionName, text);

1) position

positionName 是一个字符串，表示相对于元素的位置。 positionName 接受以下四个值之一：

'beforebegin': 在元素之前
'afterbegin': 在元素的第一个子元素之前
'beforeend': 在元素的最后一个子元素之后
'afterend': 在元素之后

注意，'beforebegin'和'afterend'仅在元素位于 DOM 树中并且具有父元素时才可用。

insertAdjacentHTML()方法没有返回值。

下面代码注释说明了每个参数所在的位置

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

2) text

text 参数是一个字符串，insertAdjacentHTML() 方法将其解析为 HTML，和innerHTML差不多。

安全问题

与innerHTML 一样，如果需要把用户输入传递到insertAdjacentHTML() 方法中，则应始终对其进行转义来避免安全风险。

使用例子

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>insertAdjacentHTML() Demo</title>
 </head>
 <body>
   <ul id="list">
     <li>CSS</li>
   </ul>

   <script>
     let list = document.querySelector('#list');

     list.insertAdjacentHTML('beforebegin', '<h2>Web 前端必备技能</h2>');
     list.insertAdjacentHTML('afterbegin', '<li>HTML</li>');
     list.insertAdjacentHTML('beforeend', '<li>JavaScript</li>');
     list.insertAdjacentHTML('afterend', '<p>更多知识等你学习</p>');
   </script>
 </body>
 </html>

输出的HTML结构为

<h2>Web 前端必备技能</h2>

<ul id="list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<p>更多知识等你学习</p>

最后

这个方法可能使用的比较少，大家有用过这个方法吗？

如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新