为何动态生成的脚本未追加至.skip-page div反而添加到body？

以下是可能导致脚本被追加到<body>而非目标位置的原因，以及对应的解决办法：

• 目标元素未加载时脚本已执行
  这是最常见的核心原因：你的自执行函数在DOM完全渲染前就运行了，此时.skip-page元素还没被解析到DOM树中，jQuery选择器$('.skip-page')返回空集合。当对空集合调用append()时，jQuery会默认将元素追加到<body>末尾，这就出现了你看到的结果。

  解决办法：

  • 将这段脚本放在HTML文档的末尾（</body>标签之前），确保目标元素已经被渲染完成。
  • 或者用DOM就绪事件包裹代码，确保在DOM加载完成后再执行：

    $(document).ready(function() {
        let relScript = document.createElement('script');
        relScript.src="https://mountain.com/assets/js/sso.js";
        relScript.type  = "text/javascript";
        relScript.async  = true;
        relScript.defer  = true;
        $('.skip-page').after(relScript); // 注意这里用after满足"放在div之后"的需求
    });
    

• 方法使用错误（混淆append与after）
  你的需求是将脚本放在.skip-page之后（作为兄弟节点），但append()的作用是把元素追加到目标元素的内部末尾。虽然这个错误本身不会直接导致脚本跑到<body>，但如果目标元素不存在，就会触发上面的问题。要实现"放在div之后"的需求，应该使用after()方法，它会将元素插入到目标元素的外部后方。

• jQuery未正确加载
  如果页面没有引入jQuery，或者jQuery的引入位置在这段脚本之后，$会处于未定义状态，浏览器会抛出错误。部分特殊环境下可能会触发 fallback 逻辑，导致脚本被追加到<body>。检查页面是否正确引入jQuery，且引入顺序在这段脚本之前。

• 选择器匹配错误
  确认.skip-page类名没有拼写错误，或者该元素不是通过其他脚本动态生成的。如果是动态生成的元素，需要等待该元素创建完成后再执行你的脚本。

内容的提问来源于stack exchange，提问作者GPiter