脚本执行 - innerHTML、jQuery html()答案

【问题标题】：Script Execution - innerHTML, jQuery html()脚本执行 - innerHTML、jQuery html()
【发布时间】：2014-08-06 01:17:36
【问题描述】：

document.body.innerHTML = "<script>alert(11);</script>"

$("body").html("<script>alert(11);</script>")

innerHTML 未执行。

jQuery html() 被执行。

为什么会这样？

【问题讨论】：

Can scripts be inserted with innerHTML? 的可能重复项

标签： javascript jquery html innerhtml

【解决方案1】：

在不讨论 jQuery 为什么选择这样做的理论问题的情况下，jQuery html() 的行为与原生 innerHTML 不同。默认情况下，jQuery 会在 HTML 中找到脚本标签，然后异步加载。如果这种行为不受欢迎，您可以使用$.parseHTML 将第三个参数设置为false 来防止这种情况发生。

$("body").empty().append($.parseHTML("<script>alert(11);</script>", document, false));

请注意，使用此方法不会将脚本标签添加到 DOM 中。

相反，如果您希望在 vanilla JS 中实现与 jQuery 语句相同的效果，您可以执行以下操作。

var script = document.createElement('script');
script.text = 'alert(11);';
document.body.innerHTML = '';
document.body.appendChild(script);

【讨论】：

【解决方案2】：

试试这个...

var x = document.createElement('script');
var y = document.getElementsByTagName('script')[0];
x.text = "alert(11);"
y.parentNode.insertBefore(x, y);

【讨论】：

【解决方案3】：

使用innerHTML将停止脚本按照文档执行，简单的文字不赘述。

<script type="text/javascript">
    var script = document.createElement('script');
    script.appendChild(document.createTextNode("alert('11')"));
    document.body.appendChild(script);
</script>

【讨论】：