如何在页面上插入 html 代码（使用 DOCTYPE）？答案

【问题标题】：How to insert html code on the page (with DOCTYPE)?如何在页面上插入 html 代码（使用 DOCTYPE）？
【发布时间】：2018-12-25 23:28:50
【问题描述】：

无法使用 DOCTYPE 插入代码。对于突出显示，我使用 highlight.js

我试过了：

document.querySelectorAll("code").forEach(function(element) {
        element.innerHTML = element.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
    });

HTML：

<pre><code class="html"><!DOCTYPE html>
<html>
  <body>
    <div class="wrapper"></div>
  </body>
</html></code></pre>

【问题讨论】：

标签： javascript html css highlight.js

【解决方案1】：

这里的问题是您正在编写无效的 HTML，将其转换为执行错误恢复的 DOM（通过加载 HTML 文档），然后尝试将 DOM 转换回 HTML。

这将为您提供浏览器从错误中恢复的内容的 HTML 表示，而不是原始代码。

您应该首先正确编写 HTML，而不是稍后尝试使用 JavaScript 修复它。

<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;div class="wrapper"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>

【讨论】：

【解决方案2】：

你可以用 textarea 包裹它，然后，从 textarea 复制文本，并将其设置为代码元素的 innerHTML。

document.querySelectorAll("code textarea").forEach(function(element) {
  element.parentElement.innerHTML = element.innerHTML;

});

<pre>
<code class="html">
<textarea>
<!DOCTYPE html>
<html>
  <body>
    <div class="wrapper">
      <p>Works</p>
    </div>
  </body>
</html>
</textarea>
</code>
</pre>

【讨论】：