javascript - 使用 insertAdjacentHTML 在 .js 文件中给出错误，但在控制台代码段中没有给出错误

Question

它适用于 CodePen 和控制台日志片段:https://codepen.io/MistaPrime/pen/ZEYLvaR

但是当将其插入到 .js 文件中时，会出现以下错误: Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

该代码的目的是插入 #numeric-toc 的副本.rounded-block之后的内容并创建一个名为 #sticky-numeric-toc 的新 div其中将保存 #numeric-toc 的副本内容。

// insert sticky menu holder into the sidebar
var stickyMenu = document.querySelector('.rounded-block');
stickyMenu.insertAdjacentHTML('afterend', '<div id="sticky-numeric-toc">two</div>');

// copy-paste table of contents into sticky sidebar
document.getElementById("sticky-numeric-toc").innerHTML =
document.getElementById("numeric-toc").innerHTML;


// on scroll add fixed class to sidebar
window.addEventListener('scroll', function() {
  var elementTarget = document.getElementById('numeric-toc');
  if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
      document.querySelector('#sticky-numeric-toc').classList.add('anotherclass');
  } else {
    document.querySelector('#sticky-numeric-toc').classList.remove('anotherclass');
  }
});

<div id="numeric-toc">
THIS WILL BE CONTENT TO COPY
</div>



<div class="rounded-block">     
</div>

基本上我的问题是，我无法使用在内容之后加载的 Stickysidebar.js 使此代码在浏览器中工作。它适用于 CodePen 和 snippet，但在网站启动后就不再适用。

我应该使用 insertAdjacentHTML 以外的其他内容吗？ ？

Answer 1

只要我在代码周围添加 window.onload ，您的代码似乎就可以正常工作:

window.onload = function() {
  // your code ...
}

给我提供了与 codepen 示例相同的结果。也许 codepen 在运行 JS 之前默认执行此操作？