知道为什么下面的代码没有将脚本元素添加到 DOM 中吗？
var code = "<script></script>";
$("#someElement").append(code);
【问题讨论】：
标签： javascript jquery
好消息是：
100% 正常工作。
只需在脚本标签内添加一些内容，例如alert('voila!');。您可能想问的正确问题可能是，“为什么我没有在 DOM 中看到它？”。
Karl Swedberg 对jQuery API site 中访客的评论做了很好的解释。我不想想重复他的所有话，你可以直接阅读there这里（我发现那里的cmets很难导航） .
jQuery 的所有插入方法都使用 内部的 domManip 函数 清洁/处理元素之前和 在它们被插入到 DOM 之后。 domManip 的一件事 功能是拉出任何脚本 即将插入和运行的元素 他们通过“evalScript 例程” 而不是将它们与其余部分一起注入 DOM 片段。它插入 分别编写脚本，评估它们， 然后将它们从 DOM 中移除。
我相信 jQuery 的原因之一 这是为了避免“权限 拒绝”错误可能发生在 插入时的 Internet Explorer 特定情况下的脚本。 也避免了反复 插入/评估相同的脚本 （这可能会导致 问题）如果它在包含 您要插入的元素和 然后在 DOM 中移动。
接下来，我将通过使用.append() 函数添加脚本来总结什么是坏消息。
坏消息是..
你不能调试你的代码。
我不是在开玩笑，即使您在要设置为断点的行之间添加 debugger; 关键字，您最终也只会得到对象的调用堆栈而看不到源代码上的断点， （更不用说这个关键字只在webkit浏览器中有效，其他所有主流浏览器似乎都省略了这个关键字）。
如果您完全了解您的代码的作用，那么这将是一个小缺点。但如果你不这样做，你最终会在所有地方添加一个debugger; 关键字，只是为了找出你（或我的）代码有什么问题。无论如何，还有一个替代方案，不要忘记 javascript 可以原生操作 HTML DOM。
解决方法。
使用 javascript（不是 jQuery）来操作 HTML DOM
如果您不想失去调试功能，则可以使用 JavaScript 原生 HTML DOM 操作。考虑这个例子：
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "path/to/your/javascript.js"; // use this for linked script
script.text = "alert('voila!');" // use this for inline script
document.body.appendChild(script);
就在那里，就像过去一样，不是。并且不要忘记清理 DOM 或内存中所有被引用且不再需要的对象的内容，以防止内存泄漏。您可以考虑使用此代码进行清理：
document.body.removechild(document.body.lastChild);
delete UnusedReferencedObjects; // replace UnusedReferencedObject with any object you created in the script you load.
此解决方法的缺点是您可能会意外添加重复的脚本，这很糟糕。从这里您可以稍微模仿.append() 函数，方法是在添加之前添加对象验证，并在添加脚本后立即从 DOM 中删除脚本。考虑这个例子：
function AddScript(url, object){
if (object != null){
// add script
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "path/to/your/javascript.js";
document.body.appendChild(script);
// remove from the dom
document.body.removeChild(document.body.lastChild);
return true;
} else {
return false;
};
};
function DeleteObject(UnusedReferencedObjects) {
delete UnusedReferencedObjects;
}
这样，您可以添加具有调试功能的脚本，同时避免脚本重复。这只是一个原型，您可以扩展为任何您想要的。我一直在使用这种方法，对此非常满意。果然我永远不会用jQuery.append()添加脚本。
【讨论】：
$.getScript 内置在 jQuery 中。
我已经看到一些浏览器在您直接执行某些更改时不尊重某些更改的问题（我的意思是从文本创建 HTML，就像您尝试使用 script 标签一样），但是当您使用 built -in 命令事情变得更好。试试这个：
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
$("#someElement").append( script );
发件人：JSON for jQuery
【讨论】：
$("#someElement")[0].appendChild( script );
可以使用 jQuery function getScript 动态加载 JavaScript 文件
现在将调用外部脚本，如果无法加载，它将优雅降级。
【讨论】：
eval()。
“不工作”是什么意思？
jQuery 检测到您正在尝试创建 SCRIPT 元素，并将自动在全局上下文中运行该元素的内容。你是在告诉我这对你不起作用吗？ -
$('#someElement').append('<script>alert("WORKING");</script>');
编辑：如果您在运行命令后没有在 DOM 中看到 SCRIPT 元素（例如在 Firebug 中），那是因为 jQuery，就像我说的那样，将运行代码然后删除 SCRIPT 元素 - 我相信SCRIPT 元素总是附加到正文中......但无论如何 - 在这种情况下，放置对代码执行绝对没有影响。
【讨论】：
这行得通：
$('body').append($("<script>alert('Hi!');<\/script>")[0]);
看起来 jQuery 对脚本做了一些聪明的事情，所以你需要附加 html 元素而不是 jQuery 对象。
【讨论】：
$()、[0]，也不需要转义（例如\/script），还因为这里的代码由于某种原因不能处理多个标签（例如，多个脚本），而@James'可以。
试试这个可能会有帮助：
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src","scriptAnalytics.js");
document.getElementsByTagName("head")[0].appendChild(fileref);
【讨论】：
我想做同样的事情，但在其他框架中附加一个脚本标签！
var url = 'library.js';
var script = window.parent.frames[1].document.createElement('script' );
script.type = 'text/javascript';
script.src = url;
$('head',window.parent.frames[1].document).append(script);
【讨论】：
<script>
...
...jQuery("<script></script>")...
...
</script>
字符串文字中的</script> 终止整个脚本，以避免可以使用"</scr" + "ipt>" 代替。
【讨论】：
"\x3cscript\x3e\x3c/script\x3e"。在 XHTML 中，您只需要放入一个注释掉的 CDATA 块。
</。见stackoverflow.com/questions/236073/…
在脚本文件中添加 sourceURL 有帮助，如本页所述： https://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/
【讨论】：
您的脚本正在执行，您不能从中使用document.write。使用警报对其进行测试并避免使用document.write。你的js文件中document.write的语句不会被执行，其余的函数都会被执行。
【讨论】：
这是我认为最好的解决方案。 Google Analytics 就是通过这种方式注入的。
var (function(){
var p="https:" == document.location.protocol ? "https://" : "http://";
d=document,
g=d.createElement('script'),
s=d.getElementsByTagName('script')[0];
g.type='text/javascript';
g.src=p+'url-to-your-script.js';
s.parentNode.insertBefore(g,s); })();
【讨论】：
您不需要 jQuery 来创建 Script DOM Element。可以使用 vanilla 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 中，但这样做可以让您在脚本加载时解决承诺，有助于防止长时间运行的脚本出现竞争条件。
【讨论】：
将脚本附加到正文：
$(document).ready(function() {
$("<script>", { src : "bootstrap.min.js", type : "text/javascript" }).appendTo("body");
});
【讨论】：
如果要附加代码，另一种方法是使用 document.createElement 方法，但随后使用 .innerHTML 而不是 .src。
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.innerHTML = 'alert("Hey there... you just appended this script to the body");';
$("body").append( script );
【讨论】：
可以这样试试
var code = "<script></" + "script>";
$("#someElement").append(code);
您不能执行"<script></script>" 的唯一原因是因为 DOM 层无法解析什么是 js 和什么是 HTML，所以在 javascript 中不允许使用该字符串。
【讨论】：
我写了一个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)
【讨论】：
只需通过使用 jQuery 解析来创建一个元素。
<div id="someElement"></div>
<script>
var code = "<script>alert(123);<\/script>";
$("#someElement").append($(code));
</script>
【讨论】：