JavaScript insertAdjacentHTML - JavaScript 教程

摘要：在本教程中，您将学习如何使用 insertAdjacentHTML() 方法将 HTML 插入到文档中。

JavaScript insertAdjacentHTML() 方法简介

insertAdjacentHTML() 是 Element 接口的方法，因此您可以从任何元素中调用它。

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

element.insertAdjacentHTML(positionName, text);Code language: JavaScript (javascript)

insertAdjacentHTML() 方法有两个参数

1) 位置

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

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

请注意，'beforebegin' 和 'afterend' 仅在元素位于 DOM 树中且具有父元素时才相关。

insertAdjacentHTML() 方法没有返回值，或者默认情况下为 undefined。

以下可视化效果说明了位置名称

2) 文本

text 参数是一个字符串，insertAdjacentHTML() 方法将其解析为 HTML 或 XML。它不能是 Node 对象。

安全考虑

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

JavaScript insertAdjacentHTML() 方法示例

以下 JavaScript 示例使用 insertAdjacentHTML() 方法将各种元素插入到页面中，其位置相对于 ul 元素。

 <!DOCTYPE html>
 <html lang="en">
 <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 Technology</h2>');
         list.insertAdjacentHTML('afterbegin', '<li>HTML</li>');
         list.insertAdjacentHTML('beforeend', '<li>JavaScript</li>');
         list.insertAdjacentHTML('afterend', '<p>For frontend developers</p>');
     </script>
 </body>
 </html>Code language: HTML, XML (xml)

工作原理

首先，使用 querySelector() 方法通过其 id list 选择 ul 元素。
接下来，使用 insertAdjacentHTML() 方法在 ul 元素之前插入一个标题 2 元素。位置为 'beforebegin'。
然后，使用 insertAdjacentHTML() 方法在 ul 元素的第一个子元素之前插入一个新的列表项元素。位置为 'afterbegin'。
之后，使用 insertAdjacentHTML() 方法使用位置 'beforeend' 在 ul 元素的最后一个子元素之后插入一个新的列表项元素。
最后，使用 insertAdjacentHTML() 方法使用位置 'afterend' 在 ul 元素之后插入一个新的段落元素。

摘要

使用 insertAdjacentHTML() 方法将文本作为节点插入到 DOM 树的指定位置。
始终转义传递到 insertAdjacentHTML() 方法的用户输入文本，以避免安全风险。

测验

本教程对您有帮助吗？