使用 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 链的一部分。您忘记了 ()=> 使其成为回调。

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

Unable to getElementById() after inserting HTML from a file using innerHTML

html

javascript

innerhtml

getelementbyid