How to append <script></script> in JavaScript?

393,684

Solution 1

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.

Solution 2

// Create the element

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

// Add script content

script.innerHTML = "...";

// Append

document.head.appendChild(script);

Or

document.body.appendChild(script);

Solution 3

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

DEMO

Solution 4

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);
  })();

Solution 5

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.

Share:
393,684
David
Author by

David

Updated on July 08, 2022

Comments

  • David
    David almost 2 years

    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?

    • Thomas Clayson
      Thomas Clayson over 12 years
      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.
    • Black
      Black about 6 years
      simply write <script><\/script> instead of <script></script>
  • Boyan
    Boyan over 9 years
    Cool but how does this work? I've known this fix for about a year and still have no clue whatsoever.
  • qwertymk
    qwertymk over 9 years
    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
  • James
    James about 8 years
    Inspect element and you'll see
  • ThisLeeNoble
    ThisLeeNoble about 8 years
    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. stackoverflow.com/questions/7718935/…
  • Chef_Code
    Chef_Code almost 8 years
    nicely done... where should you place this function call? does it matter? head body
  • Vishal Kumar Sahu
    Vishal Kumar Sahu over 7 years
    no it should be in the dom only... Just that...
  • Michael Rogers
    Michael Rogers over 4 years
    You can set async to true.
  • topsoftwarepro
    topsoftwarepro almost 4 years
    I tried every other way with my script, but this is the only way that worked! Thank you very much!
  • Timo
    Timo over 3 years
    s.type is not needed, the shorter the better.
  • tanguy_k
    tanguy_k about 3 years
    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)
  • TawabG
    TawabG over 2 years
    I tried to append a js widget (with html and a script tag) to a div. This solution worked perfectly! Thank you!
  • Protector one
    Protector one over 2 years
    @Timo type is required for generating valid HTML if you use an XHTML doctype.
  • Timo
    Timo over 2 years
    @Protectorone I do not quite agree, the default is text/javascript, check here