JavaScript多元素插入DOM问题：如何精准定位脚本输出位置？

你的问题根源在于通过遍历所有script标签匹配UniqueID的方式存在竞态风险——多脚本实例同时执行时，可能出现遍历到未完全加载的script标签、或者匹配逻辑误命中其他实例的情况，导致内容重复/缺失。

最优解决方案：利用脚本执行上下文直接定位自身 #

不需要遍历所有script标签，直接获取当前正在执行的脚本元素，从根源避免匹配冲突：

1. 使用标准API document.currentScript（推荐）

脚本执行时，document.currentScript会精准指向当前运行的<script>元素，完全不需要依赖URL中的UniqueID做匹配：

// 创建并填充内容容器
const myDiv = document.createElement('div');
myDiv.innerHTML = '你的HTML内容';

// 直接获取当前脚本元素
const currentScript = document.currentScript;
// 插入到当前脚本的前面
currentScript.parentNode.insertBefore(myDiv, currentScript);

2. 兼容旧浏览器（如IE）的 fallback 方案

如果需要兼容不支持document.currentScript的浏览器，可以利用同步脚本执行时的DOM顺序——同步加载的脚本执行时，它是页面中最后一个已解析的<script>元素：

const myDiv = document.createElement('div');
myDiv.innerHTML = '你的HTML内容';

// 兼容逻辑：优先用currentScript，否则取最后一个script标签
const currentScript = document.currentScript || (function() {
  const scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

currentScript.parentNode.insertBefore(myDiv, currentScript);

为什么原来的方法会出错？ #

• 当多个脚本实例同时执行时，遍历document.getElementsByTagName('script')的结果可能包含未完全加载的脚本标签，导致匹配逻辑出现误判；
• 依赖URL中的UniqueID做字符串匹配，存在匹配错误的风险（比如URL参数被编码、或者不同实例的UniqueID出现字符串重叠）；
• 脚本加载顺序的不确定性（比如网络延迟导致某脚本晚加载但先执行），会打乱遍历匹配的逻辑。

额外注意事项 #

• 如果你的脚本使用了async或defer属性，document.currentScript依然能正常工作，但scripts[scripts.length-1]的兼容方案可能失效，因此优先使用标准API；
• 可移除URL中的UniqueID参数（如果不需要其他业务逻辑），进一步简化实现，避免额外的匹配开销。

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