dom：innerHTML 调用不显示代码答案

【问题标题】：dom: innerHTML call is not displaying codedom：innerHTML 调用不显示代码
【发布时间】：2019-02-23 23:35:30
【问题描述】：

我有这个 html：

<h3 id="this-is-title">This is title</h3>
<p><a name="abcde"></a></p>
<pre lang="java" class="prettyprint">

 class NeoEach {

   static <T, V, E> void Each(int limit, Iterable<T> i, Asyncc.IEacher<T, E> m, Asyncc.IEachCallback<E> f) {

     final CounterLimit c = new CounterLimit(limit);
     final ShortCircuit s = new ShortCircuit();
     final var iterator = i.iterator();
     RunEach(iterator, c, s, m, f);
     handleSameTickCall(s);
   }

 }
</pre>

当它作为index.html 文件加载时，显示如下：

但是当我像这样设置 dom 元素的 innerHTML 时：

     fetch('https://async-java.github.io/md/html-from-md.html')
      .then(r => {
        const el = document.getElementById('foo');
        return r.text().then(v => {
          el.innerHTML = v; // this is good
        });
      });

显示如下：

我不知道为什么它不起作用，有人知道为什么吗？

当我检查 dom 时，HTML 看起来不错：

【问题讨论】：

标签： javascript html dom innerhtml

【解决方案1】：

如果这是您的实际代码，那么您有一个 div#foox，但您正在尝试设置 #foo 的 innerHTML。所以

const el = document.getElementById('foox');

而不是

const el = document.getElementById('foo');

编辑如果您使用的是 Google 的代码美化库，请遵循 HTML5 约定，将 <code> 元素包装在 <pre> 元素 (GitHub - google/code-prettify) 内。

<pre class="prettyprint"><code class="language-java">...</code></pre>

【讨论】：

是的，不是这样，我将 el 从 foo 重命名为 foox，所以它不是正确的元素，不知道发生了什么
如果您使用 React 或 Angular 或其他框架，您可能必须清理您尝试插入 DOM 的输入。此外，如果使用此类框架，请考虑可能会覆盖之前指定的 innerHTML 的“重新渲染”。