前端开发中，通过 AJAX 动态加载广告卡片是常见需求，但许多开发者会遇到一个关键问题：将包含 <script> 标签的 HTML 字符串（如广告 SDK 的加载代码）用 insertAdjacentHTML 插入 DOM 后，脚本不会自动执行</script>。这是因为浏览器仅对初始 HTML 解析时执行内联或外链脚本，而通过 innerHTML 或 insertAdjacentHTML 插入的 <script> 标签会被忽略（不执行、不加载）。</script>

✅ 正确做法是：分离 HTML 结构与脚本逻辑，先插入静态 DOM 节点（如 div#container-70dc149ec489e883ffe0c36bd73d05d0），再单独创建并注入 <script> 元素。</script>

以下是一个健壮、可复用的解决方案：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

function injectAdScript() {
  // 1. 插入广告容器（纯 HTML，不含 script）
  const adCard = `
    <div class="card mt-3 mb-3 bg-dark text-white">
      <div class="card-body">
        <h6 class="card-subtitle mb-2 text-muted">Sponsored Content, sorry :(</h6>
        <div id="ad-body" class="card-content col d-flex justify-content-center">
          <div id="container-70dc149ec489e883ffe0c36bd73d05d0"></div>
        </div>
      </div>
    </div>`;

  document.getElementById("feed_container").insertAdjacentHTML('beforeend', adCard);

  // 2. 手动创建并注入广告脚本（确保 async 加载）
  const script = document.createElement('script');
  script.async = true;
  script.dataset.cfasync = 'false';
  script.src = '//pl22464107.profitablegatecpm.com/70dc149ec489e883ffe0c36bd73d05d0/invoke.js';

  // ⚠️ 注意：必须将 script 追加到文档中（如 body 或特定父容器），否则不会执行
  document.body.appendChild(script);
}

// 在 AJAX 成功回调中调用
// fetch('/api/feed').then(res => res.json()).then(data => {
//   renderFeedItems(data);
//   injectAdScript(); // 每次插入广告时调用
// });

? 关键注意事项：

• ❌ 不要将 <script> 写在 insertAdjacentHTML 的字符串中——它会被解析为文本节点，不会执行；</script>
• ✅ 使用 document.createElement('script') + appendChild() 是唯一可靠方式；
• ✅ 若广告脚本依赖特定 DOM 元素（如 #container-70dc149ec489e883ffe0c36bd73d05d0），请确保该元素已存在于 DOM 中（即先插入 HTML，再注入 script）；
• ✅ 对于多个广告位，建议为每个容器生成唯一 ID，并动态构造对应 script 和 container ID，避免冲突；
• ? 注意广告脚本来源的安全性，尤其当 src 来自不可信第三方时，应评估 CSP（内容安全策略）兼容性。

通过该模式，你既能保持广告结构的可维护性，又能确保第三方 JS 正确加载、执行，真正实现「动态插入 + 动态执行」的完整闭环。