Question

Here is what i want to do.
Normally we can call javascript functions on different event, button clicks within the page provided that script is already in the page (may be in head section) or it has been loaded in the head section from external js file on load time.

Is it possible to load an external js file not when the page loads but at a later stage when (say) a button is clicked.

I know this is easily possible in JQuery:

$.getScript("url to js file", function(){});

But i want to know how can we do the same using simple javascript within the page without JQuery?

Answer 1

Dynamically create the script element :

<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="other.js";
oHead.appendChild( oScript);
</script>