你知道为什么下面这段代码没有将脚本元素添加到DOM中吗?

var code = "<script></script>";
$("#someElement").append(code);

当前回答

在脚本文件中添加sourceURL会有帮助,如本页所述: https://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

在脚本文件中,添加一个带有sourceURL的语句,如"//@ sourceURL=foo.js" 使用jQuery $.getScript()加载脚本,脚本将在chrome开发工具的“sources”选项卡中可用

其他回答

将脚本追加到正文:

$(document).ready(function() {
    $("<script>", {  src : "bootstrap.min.js",  type : "text/javascript" }).appendTo("body");
});

你不需要jQuery来创建一个Script DOM元素。它可以用香草ES6这样做:

const script = "console.log('Did it work?')"
new Promise((resolve, reject) => {
  (function(i,s,o,g,r,a,m){
      a=s.createElement(o),m=s.getElementsByTagName(o)[0];
      a.innerText=g;
      a.onload=r;m.parentNode.insertBefore(a,m)}
  )(window,document,'script',script, resolve())
}).then(() => console.log('Sure did!'))

它不需要包装在Promise中,但是这样做允许您在脚本加载时解析Promise,有助于防止长时间运行的脚本出现竞争条件。

如此:

$('body').append($("<script>alert('Hi!');<\/script>")[0]);

jQuery似乎在脚本上做了一些聪明的事情,所以你需要附加html元素而不是jQuery对象。

我试过这个,效果很好。只需将<符号替换为\x3C。

// With Variable
var code = "\x3Cscript>SomeCode\x3C/script>";
$("#someElement").append(code);

or

//Without Variable
$("#someElement").append("\x3Cscript>SomeCode\x3C/script>");

您可以在这里测试代码。

我写了一个npm包,它可以让你在执行脚本时将HTML字符串(包括脚本标签)附加到容器中

例子:

import appendHtml from 'appendhtml';

const html = '<p>Hello</p><script src="some_js_file.js"></script>'; 
const container = document.getElementById('some-div');

await appendHtml(html, container);

// appendHtml returns a Promise, some_js_file.js is now loaded and executed (note the await)

在这里找到它:https://www.npmjs.com/package/appendhtml