时间戳

首页 > 解决方案 > dom：innerHTML 调用不显示代码

javascript - dom：innerHTML 调用不显示代码

问题描述

我有这个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文件加载时，它显示如下：

NH

但是当我像这样设置 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 看起来不错：

在此处输入图像描述

标签： javascripthtmldominnerhtml

解决方案

如果这是您的实际代码，那么您有一个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>

推荐阅读