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 = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

But I got string literal errors on that var. I then tried encoding the string like:

var a = '&left;script type="text/javascript">some script here<\/script>';

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 <script> tag into the browser after page load, ideally via jQuery?

Answer 1

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

Answer 2

ignore this answer ;)

Answer 3

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 need for that.

If the script is static, then Rocket's getScript-suggestion is the way to go.

Answer 4

Try the following:

<script type="text/javascript">
// 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);
});

Credits: link text

first comment.