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

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

当前回答

只需通过jQuery解析来创建一个元素。

<div id="someElement"></div>
<script>
    var code = "<script>alert(123);<\/script>";
    $("#someElement").append($(code));
</script>

工作示例:https://plnkr.co/edit/V2FE28Q2eBrJoJ6PUEBz

其他回答

我曾见过一些浏览器在你直接执行某些更改时不尊重它们的问题(我指的是从文本创建HTML,就像你尝试使用script标记一样),但当你使用内置命令执行这些更改时,事情会变得更好。试试这个:

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
$("#someElement").append( script );

来自:JSON for jQuery

你说“不工作”是什么意思?

jQuery检测到您正在尝试创建一个SCRIPT元素,并将自动在全局上下文中运行元素的内容。你是说这对你没用吗?-

$('#someElement').append('<script>alert("WORKING");</script>');

编辑:如果你在运行命令后没有在DOM中看到SCRIPT元素(例如在Firebug中),这是因为jQuery,就像我说的,将运行代码,然后将删除SCRIPT元素-我相信SCRIPT元素总是附加到主体…但无论如何,在这种情况下,位置对代码执行完全没有影响。

可以这样试试

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

你不能做“<script></script>”的唯一原因是因为字符串在javascript中是不允许的,因为DOM层不能解析什么是js什么是HTML。

将脚本追加到正文:

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

我写了一个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