innerHTML追加含script的HTML后脚本不执行，如何强制执行？

首先得明确：浏览器出于安全机制，默认不会执行通过innerHTML插入的<script>标签内容——不管是内联脚本还是外部脚本，都会被解析成DOM元素，但不会触发执行。

要让这段脚本跑起来，你可以手动提取脚本内容，通过创建新的<script>元素并插入到文档中的方式来执行，具体步骤如下：

解决方案代码示例 #

var str = '<div><p>Examplee</p></div><script>alert("testing!")</script>';

// 第一步：把实体编码的HTML转成真实的HTML字符串
var decodedHtml = str.replace(/&lt;/g, '<').replace(/&gt;/g, '>');

// 创建临时DOM容器，用来解析HTML内容
var tempDiv = document.createElement('div');
tempDiv.innerHTML = decodedHtml;

// 提取所有script标签并逐个执行
var scriptElements = tempDiv.querySelectorAll('script');
scriptElements.forEach(function(originalScript) {
    var newScript = document.createElement('script');
    
    // 处理外部脚本（如果有的话）
    if (originalScript.src) {
        newScript.src = originalScript.src;
    } else {
        // 处理内联脚本，复制原脚本的内容
        newScript.textContent = originalScript.textContent;
    }
    
    // 插入到body，触发脚本执行
    document.body.appendChild(newScript);
});

// 把除了script之外的内容追加到body里
document.body.appendChild(tempDiv);

关键说明 #

1. 实体解码：你的原始字符串里是<、>这类HTML实体，所以第一步必须先转成真正的<、>标签，否则无法被DOM正确解析。
2. 手动创建script元素：通过document.createElement('script')创建的脚本元素，只要被插入到DOM中，浏览器就会正常执行其内容，这是绕过innerHTML安全限制的核心。
3. 安全警告⚠️：这种方法会带来严重的XSS（跨站脚本攻击）风险！如果你的str内容来自用户输入、第三方接口等不可信来源，绝对不要这么做——恶意脚本会直接在你的页面上执行，窃取用户数据或者破坏页面。

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