javascript - 无法读取 null 的属性 'cloneNode'，但当脚本位于 HTML 上时有效

Question

当我将脚本移动到 JavaScript 文件中时，我收到克隆节点错误 Uncaught TypeError: Cannot read property 'cloneNode' of null at application.js:42。但当脚本位于 HTML 页面中时，应用程序可以正常工作。

const candidatesTable = document.getElementById("candidates_example");
const newCandidatesTable = candidatesTable.cloneNode(true);

document.body.appendChild(newCandidatesTable);

我无法弄清楚为什么会发生这种情况，并且我正在使用 Chrome 浏览器。 https://jsfiddle.net/sithanga/sd5qtcj3/2/

Answer 1

您正在使用 document.body，但您的脚本被插入到标题中，在对元素执行任何代码之前，您应该确保它们存在于页面上。为什么当您将其作为脚本标签插入时它会起作用，因为您将其插入到底部。

例如DOMContentLoaded当所有 DOM 内容加载完毕并准备好与 JS 代码交互时，事件将被触发。