Insert html between the head tags using JavaScript

Question

In previous quests we looked at how we could insert code into a tag and with multiple attributes, and before the first tag (doctype), but what about inserting code between the head tags such as new CSS style sheets and JavaScript inserts.

I did searched here and found some related posts, but no examples that work.

For example, how to add the following lines of code using JavaScript only...

<link rel="stylesheet" type="text/css" href="chrome.css" />
<script type="text/javascript" src="chrome.js"></script>

One suggestion below looked promising, but when tested it didn't actually work, for example...

var refScript = "<SCRIPT>alert('OK');</SCRIPT>";
document.getElementsByTagName("head")[0].innerHTML += refScript;

document.head.appendChild()

gen_Eric
– gen_Eric

2012-12-06 15:49:31 +00:00
Commented Dec 6, 2012 at 15:49 — gen_Eric
– gen_Eric, Commented Dec 6, 2012 at 15:49

Jordan · Accepted Answer · 2012-12-06 15:49:53Z

11

Assuming you always actually have a <head>, you can do this:

document.getElementsByTagName("head")[0].innerHTML += "<whatever />";

You can of course also use the DOM model instead of innerHTML.

answered Dec 6, 2012 at 15:49

Jordan

32.7k6 gold badges59 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WilliamK Over a year ago

Will ("head") be case sensitive?

inhan Over a year ago

@WilliamK Nope. You can write head, HEAD, Head etc.

inhan · Accepted Answer · 2012-12-07 09:24:14Z

0

Here's how you can do that using the DOM methods.

var scrp = document.createElement('script');
scrp.type = 'text/javascript';
// approach 1:
scrp.innerHTML = "alert('OK');";
// approach 2:
var txt = document.createTextNode("console.log('hi');");
scrp.appendChild(txt);
document.head.appendChild(scrp);

answered Dec 7, 2012 at 9:24

inhan

7,5002 gold badges26 silver badges35 bronze badges

Collectives™ on Stack Overflow

Insert html between the head tags using JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related