How to dynamically insert a script tag via jQuery after page load

Question

I m having problems getting this to work   I first tried setting my script tags as strings and then using jquery replaceWith   to add them to the document after page load   var a     lt script type  text javascript  gt some script here lt  script gt        someelement   replaceWith a     But I got string literal errors on that var   I then tried encoding the string like   var a     amp left script type  text javascript  amp gt some script here amp lt   script amp gt      but sending that to replaceWith   outputs just that string to the browser   Can someone please let me know how you would go about dynamically adding a  lt script gt  tag into the browser after page load  ideally via jQuery

User · Answer

Here is a much clearer way  mdash  no need for jQuery  mdash  which adds a script as the last child of  lt body gt    document body innerHTML     lt script src  mycdn js  gt  lt   script gt     But if you want to add and load scripts use Rocket Hazmat s method

User · Answer

You can put the script into a separate file  then use   getScript to load and run it   Example     getScript  test js   function        alert  Running test js

User · Answer

Try the following    lt script type  text javascript  gt     Use any event to append the code   document  ready function          var s   document createElement  script        s type    text javascript       s src    http   scriptlocation das js          Use any selector        head   append s           http   api jquery com append

User · Answer

This answer is technically similar or equal to what jcoffland answered  I just added a query to detect if a script is already present or not  I need this because I work in an intranet website with a couple of modules  of which some are sharing scripts or bring their own  but these scripts do not need to be loaded everytime again  I am using this snippet since more than a year in production environment  it works like a charme  Commenting to myself  Yes I know  it would be more correct to ask if a function exists     -   if      head  gt  script src  js jquery searchable min js     length           head   append     lt script   gt    attr  src   js jquery searchable min js

User · Answer

If you are trying to run some dynamically generated JavaScript  you would be slightly better off by using eval  However  JavaScript is such a dynamic language that you really should not have a need for that   If the script is static  then Rocket s getScript-suggestion is the way to go

User · Answer

There is one workaround that sounds more like a hack and I agree it s not the most elegant way of doing it  but works 100    Say your AJAX response is something like   lt b gt some html lt  b gt   lt script gt alert  and some javscript     Note that I ve skipped the closing  tag on purpose  Then in the script that loads the above  do the following     ajax       url   path to return the-above-js html php       success  function newhtml           newhtml      lt            newhtml      script gt               head   append newhtml               Just don t ask me why  -  This is one of those things I ve come to as a result of desperate almost random trials and fails    I have no complete suggestions on how it works  but interestingly enough  it will NOT work if you append the closing  tag in one line   In times like these  I feel like I ve successfully divided by zero

User · Answer

A simpler way is      head   append   lt script type  text javascript  src  your js  gt  lt  script gt       You can also use this form to load css

User · Answer

Example   var a     lt script type  text javascript  gt some script here lt  script gt        someelement   replaceWith a     It should work  I tried it  same outcome  But when I used this   var length   1  var html       for  var i   0  i  lt  length  i          html      lt div id  codeSnippet  gt  lt  div gt        html      lt script type  text javascript  gt        html     your script here       html      lt  script gt          someElement   replaceWith a     This worked for me   Edit  I forgot the  someelement  btw I might want to use  someElement because of conventions   The most important thing here is the    so the html is added and not replaced   Leave a comment if it didn t work  I d like to help you out

User · Answer

Here s the correct way to do it with modern  2014  JQuery     function            lt script gt         attr  type    text javascript        text  some script here        appendTo  head         or if you really want to replace a div you could do     function            lt script gt         attr  type    text javascript        text  some script here        replaceAll   someelement

[javascript] How to dynamically insert a <script> tag via jQuery after page load?

Examples related to javascript

Examples related to jquery

Examples related to script-tag

Examples related to javascript-injection