dom：innerHTML调用未显示代码

Question

我有这个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看起来不错：

Answer 1

如果这是您的实际代码，则您有一个 div＃foox ，但是您试图将内部HTML设置为 #foo 。 所以

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>