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）？

2 个答案: