CODEWITHSUNDEEP
javascript
Joey
Joey

Reputation: 10965

Using document.head.appendChild() to append a script tag that has an SRC attribute?

Any reason why the following code isn't working?

alert("1");
document.head.appendChild("<script type=\"text/javascript\" src=\"https://getfirebug.com/firebug-lite.js\"></script>");
alert("2");

(I know it is breaking because the 1 is alerted but not the 2.)

What is the proper way to accomplish the same thing? Namely, to append a script tag to the document head, where the tag gets a .js file using the SRC attribute. I don't want it to write javascript inline.

Thanks!

Upvotes: 23

Views: 69304

Answers (2)

user14218683
user14218683

Reputation: 181

This will do what the original poster wants without creating a new object.

document.head.innerHTML += "<script type=\"text/javascript\" src=\"https://getfirebug.com/firebug-lite.js\"></script>";

The script will be appended to the end of the existing head section which may not be what you want.

Believe it or not this will put your script at the start of the head section without erasing the existing head section:

document.head.innerHTML = "<script type=\"text/javascript\" src=\"https://getfirebug.com/firebug-lite.js\"></script>" + document.head.innerHTML;

Upvotes: 8

Mathias
Mathias

Reputation: 5672

element.appendChild expects a node not a string. You should first create the node and set the attributes and then append it.

element.appendChild Reference

var sc = document.createElement("script");
sc.setAttribute("src", "https://getfirebug.com/firebug-lite.js");
sc.setAttribute("type", "text/javascript");
document.head.appendChild(sc);

For older browsers (IE < 9 etc.) that doesn't support document.head

document.getElementsByTagName("head")[0].appendChild(sc);

Upvotes: 60

Related Questions