通过JavaScript向HTML追加脚本：异步加载元素位置异常求助

看起来你遇到的核心问题是：异步加载的外部脚本默认会把生成的HTML追加到页面底部，但你希望它插入到调用这个脚本的元素所在的位置。我来给你几个可行的解决方案：

方案1：事后移动生成的元素（适合不可控的外部脚本） #

如果外部脚本不是你开发的，没法修改它的逻辑，那可以在脚本加载完成后，把它生成的元素从页面底部移到目标位置：

首先，给你的目标位置加一个唯一标识：

<!-- 这是你希望插入内容的位置 -->
<div class="rss-insert-target"></div>

然后修改你创建script的代码，监听加载完成事件：

// 找到目标元素
const target = document.querySelector('.rss-insert-target');
if (!target) return;

// 创建异步脚本
const script = document.createElement('script');
script.src = '//rss.bloople.net/?url=https%3A%2F%2Fwww.coindesk.co...';
script.async = true;

// 脚本加载完成后，移动内容到目标位置
script.onload = function() {
  // 假设外部脚本生成的内容有一个统一的类名，比如'rss-feed-content'
  const feedContent = document.querySelector('.rss-feed-content');
  if (feedContent) {
    // 把内容移到目标元素里
    target.appendChild(feedContent);
  }
};

// 添加脚本到页面开始加载
document.body.appendChild(script);

方案2：给外部脚本传递目标位置（适合可控的外部脚本） #

如果你能修改外部脚本的代码，那最好的方式是让它接受一个目标位置参数，直接把内容插入到指定位置：

外部脚本修改： #

(function() {
  // 从URL参数里获取目标选择器
  const urlParams = new URLSearchParams(new URL(document.currentScript.src).search);
  const targetSelector = urlParams.get('target');
  const targetElement = targetSelector ? document.querySelector(targetSelector) : null;

  // 生成你的RSS内容（这里替换成实际的生成逻辑）
  const rssHtml = `
    <div class="rss-feed">
      <!-- 你的RSS内容 -->
    </div>
  `;

  // 插入到目标位置，找不到就 fallback 到页面底部
  if (targetElement) {
    targetElement.innerHTML = rssHtml;
  } else {
    document.body.insertAdjacentHTML('beforeend', rssHtml);
  }
})();

调用脚本修改： #

const target = document.querySelector('.rss-insert-target');
if (!target) return;

const script = document.createElement('script');
// 把目标选择器作为URL参数传递给外部脚本
script.src = `//rss.bloople.net/?url=https%3A%2F%2Fwww.coindesk.co...&target=.rss-insert-target`;
script.async = true;
document.body.appendChild(script);

为什么原来的async脚本会插入到底部？ #

因为异步脚本执行时，它没有上下文知道自己是从哪个元素触发的，所以大多数这类脚本都会默认把内容追加到document.body的末尾。我们的核心思路就是给脚本提供一个明确的插入目标，要么事后移动，要么事前传递参数让它直接插入。

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