How can I insert a script into HTML head dynamically using JavaScript?

Question

How can I insert a script into HTML head dynamically using JavaScript?

Solution 1

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function() {
    callFunctionFromScript();
}
script.src = 'path/to/your-script.js';
head.appendChild(script);

Solution 2

Here is how I injected a function on the fly without any source file, etc.

document.head.appendChild(document.createElement('script').text = 'function LogIt(msg) { console.log(msg);}' );

And to inject to body

document.body.appendChild(document.createElement('script').text = 'function LogIt(msg) { console.log(msg);}' );

After executing this, if you try LogIt('hello');, you should see 'hello' in the console.

Solution 3

document.head.appendChild(document.createElement('script').setAttribute('src','http://ex.com/javascript.js'));

Comments

[Meligy]

What server side language do you use?

[Wasim A.]

no server side language i want to use.

[Wasim A.]

using javascript at button click i want to insert into head.

[eolith]

Check this solution: unixpapa.com/js/dyna.html

[Frederic Leitenberger]

This should not work since setAttribute() does not return the element: "Return Value: No return value" w3schools.com/jsref/met_element_setattribute.asp But you can put element in a variable element, then call element.setAttribute(...) and appendChild(element)

[Peter Mortensen]

An explanation would be in order.

[Peter Mortensen]

An explanation would be in order.