使用 innerHTML 从文件插入 HTML 后无法 getElementById()

Question

我有一个测验应用程序，其中包含一系列以幻灯片形式实现的问题。该套牌在单页应用程序 (SPA) 中播放。我有一个文件夹中每张幻灯片的 HTML，它被加载到 index.html 文件中的一个 div 容器中，该文件是单个入口点。

我使用 index.html 中占位符 div 标记的 id 和 innerHTML 属性来加载幻灯片。幻灯片在页面上正确呈现，对页面源的检查表明 HTML 已正确加载（即作为 HTML 而不是文本）。但是，我无法在应用程序代码中使用getElementById() 在插入的 HTML 中找到 HTML 元素。就好像它们不存在一样。

这是加载 HTML 以显示幻灯片的代码。它在DOMContentLoaded 时运行。

    fetch('./Slides/Quiz001.html')
        .then(data => data.text())
        .then(html => document.getElementById("Question").innerHTML = html)
        .then([].slice.call(document.getElementsByTagName("div"))
        .forEach(div_element => console.log(div_element.id)));

第一行从本地文件夹中获取要插入的幻灯片。第二行获取 HTML 字符串。第三行将 HTML 插入页面的 DOM 插入点。第四行查询所有 div 元素并将HTMLCollection 转换为数组，第五行将 ID 记录到控制台。

Quiz001.html中的HTML如下：

<div id="Quiz">
    <h3>Patanjali Yoga Sutra</h3>
    <div id="Expected" data-answer="asmina"></div>
    <p>The five kleshas, the root cause of suffering, are avidya, 
        <input type="text" id="response" data-binding="response">, 
        raga, dvesa and abhinivesa.
    </p>
</div>

这里有两个 div 元素，id 的“Quiz”和“Expected”。这些不会出现在 javascript 记录到控制台的列表中。事实上，插入后，我无法通过getElementById()或任何其他方法查询插入的HTML中的任何元素。就像它们在代码中不可见，尽管 HTML 已正确插入并且元素在页面源中正确显示。

我添加了页面和控制台的屏幕截图，并突出显示了由 javascript 插入的 HTML。任何帮助表示赞赏。

Answer 1

.then([].slice.call(document.getElementsByTagName("div"))

此行会立即进行评估，而不是作为 Promise 链的一部分。您忘记了 ()=> 以使其成为回调。