Login/Register
How to append <script></script> in JavaScript? [duplicate]
Asked Answered
Solved javascriptjqueryappendappendchild
C

6

149

I need to use appendChild() or jQuey's append() to append some <script> tag stuff into the document. From what I can tell, this is getting stripped out. Anyone know how to do it?

Courtmartial answered 23/2, 2012 at 13:9 Comment(2)
the second answer on that question with a vote of 67 is a very good answer which will tell you everything you need to know. – Adventist
simply write <script><\/script> instead of <script></script> – Souvenir
Q
175

Try this: 

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

Note that the script will load and you can access the variables inside it, but you wouldn't see the actual <script> tag in the DOM.

Quitclaim answered 23/2, 2012 at 13:13 Comment(6)
Inspect element and you'll see – Bobinette
This method generates a warning that loading scripts synchronously is detrimental to user experience. Assuming you're going to want to be calling something in that javascript you're loading, it should be loaded asynchronously and a callback method employed to run your code which is dependant on the new script. #7719435 – Peugia
You can set async to true. – Anthelion
s.type is not needed, the shorter the better. – Charmainecharmane
@Charmainecharmane type is required for generating valid HTML if you use an XHTML doctype. – Terpsichore
@Charmainecharmane is right you don't need to define defaults similar input default is type="text", with that said if you have other scripts in document.head that are not of type javascript than good to include to differentiate, but chances are you are not, your script tag always javascript, therefore redundant to be explicit – Beluga
G
308
// Create the element

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

// Add script content

script.innerHTML = "...";

// Append

document.head.appendChild(script);

Or

document.body.appendChild(script);
Goins answered 23/2, 2012 at 13:14 Comment(0)
Q
175

Try this: 

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

Note that the script will load and you can access the variables inside it, but you wouldn't see the actual <script> tag in the DOM.

Quitclaim answered 23/2, 2012 at 13:13 Comment(6)
Inspect element and you'll see – Bobinette
This method generates a warning that loading scripts synchronously is detrimental to user experience. Assuming you're going to want to be calling something in that javascript you're loading, it should be loaded asynchronously and a callback method employed to run your code which is dependant on the new script. #7719435 – Peugia
You can set async to true. – Anthelion
s.type is not needed, the shorter the better. – Charmainecharmane
@Charmainecharmane type is required for generating valid HTML if you use an XHTML doctype. – Terpsichore
@Charmainecharmane is right you don't need to define defaults similar input default is type="text", with that said if you have other scripts in document.head that are not of type javascript than good to include to differentiate, but chances are you are not, your script tag always javascript, therefore redundant to be explicit – Beluga
G
57
$('<script>alert("hi");</' + 'script>').appendTo(document.body);

DEMO

Grube answered 23/2, 2012 at 13:11 Comment(2)
Cool but how does this work? I've known this fix for about a year and still have no clue whatsoever. – Wafer
The only reason you can't do $('<script></script>') is because the string </script> isn't allowed inside javascript because the DOM layer can't parse what's js and what's html. You can even do $('<script><\/script>') to get around that limitation – Grube
P
38

If you need to append a script so that it's parsed you could do as google does for his +1 button

  (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);
  })();
Pleuro answered 23/2, 2012 at 13:13 Comment(3)
nicely done... where should you place this function call? does it matter? head body – Oliviero
no it should be in the dom only... Just that... – Holster
This code will crash (s is undefined) if you don't have any script tag in your HTML (example: <!DOCTYPE html><title>Hello, World!</title> - this is valid HTML) – Flaggy
R
30

This worked for me..

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

Note that the "/" of the inner </script> has been escaped to be "<\/script>". If it is not, it actually closes the outer <script> tag.

The script added wont be visible but will get executed. Hope that helps.

Remotion answered 28/2, 2014 at 9:0 Comment(2)
I tried every other way with my script, but this is the only way that worked! Thank you very much! – Seguidilla
I tried to append a js widget (with html and a script tag) to a div. This solution worked perfectly! Thank you! – Pedestal
C
2
$('your_document_selector').text('<script></script>')

.text() makes it possible to append script tags with it being rendered as HTML.

OR

$('your_document_selector').append('&lt;script&gt;&lt;/script&gt;')
Cobia answered 23/2, 2012 at 13:11 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.