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

Question

using javascript at button click i want to insert into head. — Wasim A., Feb 27 '11 at 09:56

score 79 · Accepted Answer · edited Aug 27 '15 at 18:11

79

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

edited Aug 27 '15 at 18:11

zackg

319
2
10

answered Mar 20 '14 at 13:34

Bugs Bunny

2,319
1
24
31

1

An explanation would be in order. – Peter Mortensen May 19 '20 at 11:28

score 6 · Answer 2 · edited May 19 '20 at 11:29

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.

score 3 · Answer 3 · answered May 15 '16 at 02:34

3

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

answered May 15 '16 at 02:34

Sandesh B Suvarna

745
8
17

2

This should not work since `setAttribute()` does not return the element: "Return Value: No return value" https://www.w3schools.com/jsref/met_element_setattribute.asp But you can put element in a variable `element`, then call `element.setAttribute(...)` and `appendChild(element)` – Frederic Leitenberger Jun 02 '17 at 09:02
An explanation would be in order. – Peter Mortensen May 19 '20 at 11:28

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

3 Answers3

Linked