在前端开发中，我们有时需要将一个包含 HTML 标记的字符串以 HTML 形式呈现出来。本文将介绍如何实现这样的需求，并提供示例代码。
方法一：使用 innerHTML 属性
可以通过将字符串赋值给一个元素的 innerHTML 属性来实现将其以 HTML 形式呈现。以下是示例代码：
---- ----------------- -------- ----- ---------- - ---------- ------------ ------------------------------------------ - ----------- ---------
上述代码将一个包含 <p> 标记的字符串以 HTML 形式呈现在 id 为 "myDiv" 的 div 元素内。
然而，这种方法存在安全风险，因为它允许任意代码执行。如果你要从用户输入的数据中生成 HTML 字符串，必须先对字符串进行过滤和转义以避免 XSS 攻击。
方法二：使用 DOMParser
DOMParser 是一种解析 XML 和 HTML 文档的 API，并将其转换为 DOM 树。通过使用 DOMParser，我们可以将一个包含 HTML 标记的字符串解析为一个 Document 对象，然后将其插入到页面中。以下是示例代码：
---- ----------------- -------- ----- ---------- - ---------- ------------ ----- ------ - --- ------------ ----- --- - ---------------------------------- ------------- ------------------------------------------------------------------ ---------
上述代码将一个包含 <p> 标记的字符串以 HTML 形式呈现在 id 为 "myDiv" 的 div 元素内。与 innerHTML 方法不同，使用 DOMParser 不会执行任意代码，因此更加安全。
总结
本文介绍了两种将 HTML 字符串以 HTML 形式呈现的方法：使用 innerHTML 属性和使用 DOMParser。虽然这两种方法都可以实现此目的，但前者存在安全风险，应谨慎使用。如果你需要从用户输入的数据中生成 HTML 字符串，请务必进行过滤和转义操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31717