can I change script src and have javascript run the new code?

I have a page that is actually a presentation, much like powerpoint. It is an infinite loop which updates itself with ajax to download new presentation content since last time around.

Now, this following line will be subject to change when user decides to change transitional effects in the slideshow.

<script id='transition' type='text/javascript' src='transitions/script/slide_off_to_right_fade.js'></script> 

However, even though I replace this entire tag w开发者_Go百科ith for example

<script id='transition' type='text/javascript' src='transitions/script/fade_in_out.js'></script> 

It still does the same thing as was there when the document was initially loaded.

Is there a special function/method to call to achieve this? Many thanks.

Ps. The same problem with an array that keeps track of number of slides and the time to stay on each slide - I update the times in the function and run the function, but it is as if I never changed a thing... more about that in another post...

You can dynamically create a script element and insert it into the DOM. If you're not using jQuery, you can do this in pure Javascript as follows:

  var ref    = document.getElementsByTagName('script')[0],
      script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src',  'transitions/script/fade_in_out.js');
  script.setAttribute('id',   'newTransition');
  ref.parentNode.insertBefore(script, ref);

Creating a new <script> element and adding it to the DOM tree should work. If you are using a JavaScript library like jQuery you can use the convenient getScript() function.