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

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

http://api.jquery.com/append