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