脚本执行- innerHTML, jQuery html()

Question

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

innerHTML未执行。

jQuery html()被执行

为什么?

Answer 1

不涉及jQuery为什么选择这样做的理论问题，jQuery html()的行为不同于原生innerHTML。默认情况下，jQuery将在HTML中找到脚本标签，并异步加载它们。如果不希望出现这种情况，可以通过将第三个参数设置为false来使用$.parseHTML来防止这种情况的发生。

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

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

相反，如果你希望在普通JS中实现与jQuery语句相同的效果，你可以这样做:

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

Answer 2

试试这个…

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

Answer 3

使用innerHTML将阻止脚本按照简单的文字执行，而不需要详细说明。

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