在 <p> 标签中显示 HTML 字符串 - Html

在 Web 开发中，经常需要在页面中显示 HTML 格式的文本。而 <p> 标签是常用的用来显示文本块的标签之一。那如何在 <p> 标签中显示 HTML 字符串呢？

一般来说，直接将 HTML 字符串放到 <p> 标签中是不起作用的，因为浏览器会将其作为纯文本进行解析，而不会将其作为 HTML 代码进行解析。

使用 innerHTML 属性

有一种简单的方法是使用 JavaScript 中的 innerHTML 属性，这个属性可以将 HTML 字符串作为 HTML 代码进行解析。具体的示例如下：

<p id="demo"></p>
<script>
var htmlString = '<a href="https://www.example.com">example</a>';
document.getElementById('demo').innerHTML = htmlString;
</script>

在上面的代码中，我们首先在 <p> 标签中创建了一个空的元素，然后在 JavaScript 代码中获取这个元素，并将需要显示的 HTML 字符串作为 innerHTML 属性的值进行赋值。这样，我们就可以在页面中看到这段 HTML 代码了。

使用 createElement 方法

除了使用 innerHTML 属性，还有一种方法是使用 JavaScript 的 createElement 方法来动态创建 HTML 元素。这个方法可以通过 JavaScript 动态地创建 HTML 元素，并添加到页面中。具体的示例如下：

<p id="demo"></p>
<script>
var htmlString = '<a href="https://www.example.com">example</a>';
var link = document.createElement('a');
link.innerHTML = htmlString;
document.getElementById('demo').appendChild(link);
</script>

在上面的代码中，我们首先在 JavaScript 中创建了一个 a 标签元素，并将 HTML 字符串赋值给 innerHTML 属性。然后，我们通过 appendChild 方法将这个元素添加到页面中。

注意事项

需要注意的是，如果显示的 HTML 代码中包含用户输入的内容（例如从数据库中读取的数据），一定要注意对 HTML 代码进行安全过滤，以避免 XSS 攻击。常见的安全过滤方式包括：

• 使用 innerText 属性代替 innerHTML 属性，以将 HTML 代码作为纯文本显示，从而避免被解析为 HTML 代码。
• 使用 DOMPurify 等第三方库对 HTML 代码进行安全过滤，以过滤掉潜在的恶意代码。