如何安全高效地将 HTML 注入到 DOM 中？

将 HTML 注入 DOM：综合指南

将 HTML 字符串附加到 DOM 是 Web 开发中的一项常见任务。在本文中，我们将探索一种有效的方法来实现此目的，而无需诉诸禁止的 innerHTML 属性。

释放 insertAdjacentHTML() 的强大功能

要动态地将 HTML 添加到文档中，请考虑利用insertAdjacentHTML() 方法。此功能受到现代浏览器的普遍支持，并提供了一种安全有效的方式来操作 DOM。

语法和用法

insertAdjacentHTML() 方法有两个参数：

• 位置：要插入 HTML 的位置。有效值包括：

  • beforebegin：元素开始之前
  • afterbegin：元素内部，第一个子元素之前
  • beforeend：元素内部，之后它的最后一个子元素
  • afterend：元素末尾之后
• html：要插入的HTML字符串

实际示例

假设您有一个

id 为 test 的元素。要将 HTML 字符串附加到此元素，我们将使用以下代码：

let str = '<p>Just some <span>text</span> here</p>';
const div = document.getElementById('test');
div.insertAdjacentHTML('beforeend', str);

这会将 HTML 插入到

中。元素，在其最后一个子元素之后。

实时演示

有关视觉演示，请访问以下 JSFiddle：http://jsfiddle.net/euQ5n/

结论

使用 insertAdjacentHTML() 为操作 DOM 提供了一个强大且交叉兼容的解决方案。利用它的强大功能，轻松将 HTML 字符串注入您的网页。

以上是如何安全高效地将 HTML 注入到 DOM 中？的详细内容。更多信息请关注PHP中文网其他相关文章！