如何在JavaScript中添加<script></script>？

Question

如何在JavaScript中添加<script></script>？

javascriptjqueryappendappendchild

146

我需要使用appendChild()或者jQuery的append()将一些<script>标签的东西附加到文档中。据我所知，这些内容会被剥离掉。有人知道如何做吗？

- David

1

那个问题的第二个回答得到了67票，是一个非常好的答案，它会告诉你需要知道的一切。 - Thomas Clayson

2

只需将 <script></script> 替换为 <script><\/script> 即可。 - Black

6个回答

172

试试这个：

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
$("head").append(s);

请注意，脚本将被加载并且您可以在其中访问变量，但是您在DOM中不会看到实际的<script>标签。

- Sapan Diwakar

11

检查元素，你会看到。 - James

7

这种方法会生成一个警告，同步加载脚本会对用户体验产生不利影响。假设你想要调用正在加载的JavaScript中的某些内容，应该异步加载它，并使用回调函数来运行依赖于新脚本的代码。 https://dev59.com/Auo6XIcBkEYKwwoYSCg1 - ThisLeeNoble

您可以将async设置为true。 - Michael Rogers

1

不需要s.type，越“短”越好。 - Timo

1

@Timo 如果您使用XHTML doctype，那么“type”是生成有效HTML所必需的。 - Protector one

1

@Timo是正确的，您不需要定义默认值，类似输入默认值为type="text"。话虽如此，如果您在document.head中有其他类型不是javascript的脚本，则最好包含以区分，但很可能您没有，您的脚本标签始终是javascript，因此明确是多余的。 - PDA

57

$('<script>alert("hi");</' + 'script>').appendTo(document.body);

演示

- qwertymk

很酷，但这是怎么工作的？我已经知道这个修复方法大约一年了，但仍然完全不知道。 - Boyan

22

你不能执行 $('<script></script>') 的唯一原因是因为字符串 </script> 在JavaScript中不被允许，因为DOM层无法解析哪些是JavaScript代码，哪些是HTML代码。你甚至可以使用 $('<script><\/script>') 来避免这个限制。 - qwertymk

38

如果您需要添加一个脚本以便对其进行解析，您可以像Google为其+1按钮所做的那样。

  (function() {
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = 'link to your script here';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();

- Nicola Peluchetti

做得好...你应该把这个函数调用放在哪里？有关系吗？head body - Chef_Code

不，它应该只在 DOM 中... 就这样... - Vishal Kumar Sahu

1

如果你的HTML中没有任何脚本标签（例如：<!DOCTYPE html><title>Hello, World!</title> - 这是有效的HTML），那么这段代码将会崩溃（s未定义）。 - tanguy_k

30

这对我起作用了。

<script>
    $('head').append("<script>your script content here<\/script>");
</script>

请注意，内部 </script> 的 "/" 已被转义为 "<\/script>"。如果没有进行转义，则会实际关闭外部的 <script> 标签。添加的脚本不会显示但会被执行。希望这能有所帮助。

- Suganya

我尝试了我的脚本的每一种方式，但这是唯一有效的方式！非常感谢！ - topsoftwarepro

我尝试将一个带有HTML和脚本标签的JS小部件附加到一个div中。这个解决方案完美地解决了问题！谢谢！ - TawabG

2

$('your_document_selector').text('<script></script>')

.text() 可以使得追加的脚本标签被呈现为 HTML。

OR

$('your_document_selector').append('&lt;script&gt;&lt;/script&gt;')

- linuxeasy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dennis · Accepted Answer

// Create the element

var script = document.createElement("script");

// Add script content

script.innerHTML = "...";

// Append

document.head.appendChild(script);

或者

document.body.appendChild(script);