如何将 HTML 元素转换为实际可读的 html？答案

【问题标题】：How to convert HTML elements to actual readable html?如何将 HTML 元素转换为实际可读的 html？
【发布时间】：2021-09-29 10:14:25
【问题描述】：

我正在尝试从数据库（在 markdown 中）和服务器中查询数据，我使用 Marked.js 再次将其解析为 html。但是当我把它放在 DOM 中时，它会显示：

<h1 id="h1">h1</h1> <h2 id="h2">h2</h2> <h3 id="h3">h3</h3>

我需要它再次变为可读文本，我该怎么做？

【问题讨论】：

一个快速建议：您可以将标题更改为“html 标签”而不是“html 元素”，因为 DOM 显示的是标签而不是元素。或者如果我正确理解了这个问题，标题应该是“如何将 html 标签转换为 html 元素”
通常，当您将带有 HTML 标签的字符串传递给具有 HTML XSS sanitizer 的 a 时，应该会发生这种情况，它应该防止任何 HTML 标签呈现并将它们显示为纯字符串，然后防止XSS 攻击。
您的 DOM 是否有任何 XSS 清理程序处于活动状态，例如 Sanitizer？
小心让我直接修改HTML，这是一个重大的XSS漏洞！

标签： javascript html node.js npm markdown

【解决方案1】：

将 HTML 标签渲染到 DOM 时，使用 .innerHTML

document.getElementById("#id").innerHTML ="html tags goes here".

【讨论】：

【解决方案2】：

我猜你是把这些数据当作字符串来的？如果是这样，您可以尝试以下方法：

var s = '<h1 id="h1">h1</h1> <h2 id="h2">h2</h2> <h3 id="h3">h3</h3>' //Your string
var child = document.createElement('div'); //Create a wrapper element
child.innerHTML = s; //Put your string as innerHtml
document.getElementById('id_of_your_container').appendChild(child); //append the new element to the dom so it gets visible`

【讨论】：