How can I tell a dynamically inserted <script> tag to... run

Question

I'm dynamically inserting a <script> tag with a src attribute and no content. But the browser does not pull down that src and run the script after the insertion -- the tag just sits there in the DOM.

Is it possible for me to tell the browser to "run" the script tag?

Because of the other code I'm working with, it's easier for me to keep the code fetched via the src attribute than to fetch it myself and insert it into the body of the tag -- but if that's necessary, I can do that too (and welcome any advice on that).

update with requested info

1. The script tag is inserted based on user interaction an arbitrary number of times after the page has loaded
2. I'm inserted the tag like this (jquery's html function strips out script tags): document.getElementById("my-div").innerHTML = "the script tag, which stack overflow wants to strip";

• Sam Dufel: You could wrap the contents of the inserted .js document in a function and call it after it's inserted
• clamchoda: are you using window.write to insert the script tag?
• Jacob: Try @ksiegel's advice and use a traffic monitor like Firebug or HTTP Watch to see if the script is retrieved.

Answer 1

Try following code:: Its working

 var script = document.createElement( 'script' );
 script.type = 'text/javascript'; 
 script.src =MY_URL; 
 $("#YOUR_ELEMNT_ID").append( script );

• John Bachir: Trying it now. For some reason append won't attach the script object to my div. i tried attaching some other arbitrary text and it did work. still experimenting...
• John Bachir: getting close... seem to have better luck starting with var preview_script = $( 'script' );
• John Bachir: i mean var preview_script = $('<script></scr' + 'ipt>');
• John Bachir: got it working, via no jquery -- Manish, I edited your answer with the code that worked for me -- check it out and accept it if you agree.

Answer 2

it should run right after the browser inserts the script into the dom, but you can try to wrap your script into a function and call that function after the script loads :

var script = document.createElement('script');
script.setAttribute('type','text/javascript'); 
script.setAttribute('src',script_url); 
script.onreadystatechange= function () {
 if (this.readyState == 'complete') 
 initScript();//the whole script is wrapped in this function
}
script.onload= initScript;

Hope this helps!

Answer 3

You could have a setTimeout in the main script to check if the new script is there.. and if it is, then run it. Do you know if it downloads the file or if it just does nothing? Check with Chrome's Network monitor.

I think there's a dynamic way to load Javascript without the src= tag, as well, but I haven't personally done it.

Why not have all the javascript pre-loaded and just put through some inline JS to execute it?