如何在页面上插入 html 代码（带 DOCTYPE）？

Question

无法使用 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>

Answer 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>

Answer 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>

如何在页面上插入 html 代码（带 DOCTYPE）？

How to insert html code on the page (with DOCTYPE)?

html

javascript

css

highlight.js