如何使用纯js向DOM插入并执行脚本标签

Question

如何将任何字符串插入<script>console.log('it works');</script> 浏览器 DOM 中并在浏览器控制台中看到“它有效”？

jQuery 的附加函数做这件事： $('html').append('<script>console.log('it works'); 但我正在寻找轻量级的解决方案，最好是普通的 js

上下文：字符串可以很复杂，比如<div><h1>Title</h1></div><div><script>console.log('it works');</script></div>- 它应该在 DOM 中正确呈现并完成所有 JS 工作人员的工作

Answer 1

您可以使用insertAdjacentHTML插入 HTML，然后返回并查找脚本并复制脚本src或文本，并将副本插入到 DOM 中来运行它：

// Sticking with broadly-supported features:
var htmlString = "<div><h1>Title</h1></div><div><script>console.log('it works');<\/script></div>";
var target = document.getElementById("target");
target.insertAdjacentHTML("beforeend", htmlString);
var scripts = target.getElementsByTagName("script");
while (scripts.length) {
    var script = scripts[0];
    script.parentNode.removeChild(script);
    var newScript = document.createElement("script");
    if (script.src) {
        newScript.src = script.src;
    } else if (script.textContent) {
        newScript.textContent = script.textContent;
    } else if (script.innerText) {
        newScript.innerText = script.innerText;
    }
    document.body.appendChild(newScript);
}

<div id="target"></div>

注意：任何内联document.write语句都不会像在页面的初始解析中那样工作；相反，他们将重新打开文档并用他们编写的内容替换其所有内容。