HTML多脚本未顺序执行：无法获取动态生成Quote内容的问题

你遇到的核心问题完全是脚本执行顺序导致的：TheySaidSo.render()是异步加载并渲染引用内容的——它会在后台请求数据，然后动态生成quote_text这类元素，这个过程需要时间。但你的PART3脚本在页面加载完成后立刻执行了，这时候那些动态元素还没被创建出来，自然拿不到任何内容。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：利用API的回调函数（优先推荐） #

很多第三方渲染API都会提供渲染完成回调，如果TheySaidSo.render()支持的话，这是最直接的方法。你可以把提取文本的逻辑放到回调函数里，确保只在元素渲染完成后执行：

// 先把提取逻辑封装成独立函数
function extractAndDisplayQuote() {
  let txt = "";
  const qttxt = document.getElementsByClassName("quote_text");
  
  Array.from(qttxt).forEach(el => {
    const children = el.childNodes;
    if (el.nodeName.toLowerCase() === 'span') {
      el.style.color = "white";
    }
    for (let j = 0; j < children.length; j++) {
      if (children[j].nodeName.toLowerCase() === 'a') {
        txt += children[j].innerHTML;
      }
    }
  });
  
  document.getElementById("spn").innerHTML = txt || "暂无引用内容";
}

// 调用API时传入回调
TheySaidSo.render({ 
  qod_category: 'inspire',
  callback: extractAndDisplayQuote // 渲染完成后自动执行提取逻辑
});

这样就能完美同步API渲染和你的提取脚本的执行顺序。

方案2：用MutationObserver监听DOM变化（通用解决方案） #

如果API没有提供回调函数，MutationObserver是更可靠的通用方案——它能监听目标元素的DOM变化，当动态元素被添加进去时，自动触发你的提取逻辑：

// 封装提取逻辑
function extractAndDisplayQuote() {
  let txt = "";
  const qttxt = document.getElementsByClassName("quote_text");
  
  Array.from(qttxt).forEach(el => {
    const children = el.childNodes;
    if (el.nodeName.toLowerCase() === 'span') {
      el.style.color = "white";
    }
    for (let j = 0; j < children.length; j++) {
      if (children[j].nodeName.toLowerCase() === 'a') {
        txt += children[j].innerHTML;
      }
    }
  });
  
  document.getElementById("spn").innerHTML = txt || "暂无引用内容";
}

// 监听quote_div的DOM变化
const targetNode = document.getElementById('quote_div');
const observerConfig = {
  childList: true, // 监听子元素的添加/移除
  subtree: true    // 监听所有后代元素的变化
};

const observer = new MutationObserver((mutations) => {
  // 检查是否已经生成了quote_text元素
  if (document.querySelector('.quote_text')) {
    extractAndDisplayQuote();
    observer.disconnect(); // 完成后停止监听，避免重复执行
  }
});

// 启动监听
observer.observe(targetNode, observerConfig);

这个方法不需要依赖API的任何特殊支持，只要目标元素有变化，就能精准捕获，是处理动态DOM的标准方案。

方案3：用setInterval轮询（备选方案） #

如果上面两种方法都不适用，你可以用轮询的方式定期检查元素是否存在：

// 封装提取逻辑
function extractAndDisplayQuote() {
  let txt = "";
  const qttxt = document.getElementsByClassName("quote_text");
  
  Array.from(qttxt).forEach(el => {
    const children = el.childNodes;
    if (el.nodeName.toLowerCase() === 'span') {
      el.style.color = "white";
    }
    for (let j = 0; j < children.length; j++) {
      if (children[j].nodeName.toLowerCase() === 'a') {
        txt += children[j].innerHTML;
      }
    }
  });
  
  document.getElementById("spn").innerHTML = txt || "暂无引用内容";
}

// 每100ms检查一次元素是否存在
const pollTimer = setInterval(() => {
  const qttxt = document.getElementsByClassName("quote_text");
  if (qttxt.length > 0) {
    extractAndDisplayQuote();
    clearInterval(pollTimer); // 找到元素后停止轮询
  }
}, 100);

这个方法比较简单，但不够优雅——轮询会占用一定的资源，而且无法精准判断元素何时生成，不过在简单场景下也能正常工作。

另外，注意你原来代码里的小问题：初始的txt设置了一段占位文本，会导致提取到内容后和这段文本拼接在一起，建议初始化为空字符串，或者在提取到内容时覆盖掉占位文本。

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