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

Question

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

jQuery 的 append 函数做的事情: $('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 语句都不会像在页面的初始解析中那样工作；相反，他们将重新打开文档并将其所有内容替换为他们所写的内容。