如何提取noscript标签内容并注入DOM（规避字符串形式问题）

要正确将<noscript>内的内容注入DOM并确保其中的脚本执行，你可以通过DOM解析+节点迁移的方式实现，以下是具体方案：

方法一：完整解析并迁移所有节点（含脚本执行） #

function injectNoscriptContent() {
  const noscript = document.querySelector('noscript');
  if (!noscript) return;

  // 创建临时容器解析HTML内容
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = noscript.textContent;

  // 逐个处理临时容器内的节点
  while (tempDiv.firstChild) {
    const node = tempDiv.firstChild;
    // 单独处理script标签，确保代码能执行
    if (node.tagName === 'SCRIPT') {
      const newScript = document.createElement('script');
      // 复制原script的属性
      Array.from(node.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
      // 复制脚本内容
      newScript.textContent = node.textContent;
      document.body.appendChild(newScript);
    } else {
      // 非script节点直接迁移到body
      document.body.appendChild(node);
    }
  }
}
injectNoscriptContent();

原方法失效的原因 #

• 直接使用document.body.innerHTML += content添加<script>标签时，浏览器仅会解析DOM结构，不会自动执行脚本内容。
• 用textContent获取<noscript>内容，是因为启用JS的浏览器会特殊处理<noscript>的innerHTML，textContent能拿到原始的HTML字符串。

方法二：简化版（优先执行脚本+插入其他元素） #

如果只关注脚本执行，同时保留其他DOM元素，可以用这个更简洁的写法：

function injectNoscriptContent() {
  const noscript = document.querySelector('noscript');
  if (!noscript) return;

  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = noscript.textContent;

  // 执行所有script代码
  tempDiv.querySelectorAll('script').forEach(script => {
    const newScript = document.createElement('script');
    newScript.textContent = script.textContent;
    document.body.appendChild(newScript);
  });

  // 插入剩余非script节点
  Array.from(tempDiv.children)
    .filter(node => node.tagName !== 'SCRIPT')
    .forEach(node => document.body.appendChild(node));
}
injectNoscriptContent();

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