如何从Script Module获取自身DOM元素？无需显式引用插入HTML

完全可以实现，核心是利用模块脚本特有的import.meta.url来定位当前脚本在DOM中的元素，然后在其后方插入HTML内容。

实现方法 #

对于外部模块脚本（带src属性的<script type="module">），可以通过以下步骤定位自身并插入内容：

// 模块脚本内部代码
function insertHtmlAfterSelf() {
  // 获取当前模块的URL
  const currentScriptUrl = import.meta.url;
  // 遍历所有模块脚本，匹配URL定位自身
  const scripts = document.querySelectorAll('script[type="module"]');
  const currentScript = Array.from(scripts).find(script => script.src === currentScriptUrl);
  
  if (currentScript) {
    // 在当前脚本后插入HTML
    currentScript.insertAdjacentHTML('afterend', `
      <div class="auto-inserted">
        这是脚本自动插入的HTML内容
      </div>
    `);
  }
}

insertHtmlAfterSelf();

如果是内联模块脚本（无src属性），可以给脚本添加自定义data属性来标识自身：

<script type="module" data-script-id="inline-module-demo">
function insertHtmlAfterSelf() {
  const currentScript = document.querySelector('script[type="module"][data-script-id="inline-module-demo"]');
  if (currentScript) {
    currentScript.insertAdjacentHTML('afterend', '<p>内联模块后自动插入的内容</p>');
  }
}

insertHtmlAfterSelf();
</script>

关键说明 #

• 模块脚本中document.currentScript会返回null，因此不能用这个属性定位自身，必须通过import.meta.url（外部模块）或自定义标识（内联模块）匹配。
• 这种方式支持多个独立的模块脚本，每个脚本只会定位自身并插入内容，不会互相干扰。
• 使用insertAdjacentHTML('afterend', ...)可以直接在脚本元素的紧邻后方插入HTML，无需显式指定插入目标。

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