How can I insert CSS, META, etc. tags into the head tag using Javascript?

Question

I use a hosted CMS that has a bug that won't allow me to insert content into the <head>.

I thought about using Javascript to insert the code needed into the head but will that even work? If a page is read <head> then <body> will it even matter to put the code into the head using javascript if the head has already been read or do I mis-read how the browsers work?

If you can put content into the head of a page and it will work with all major browsers what is the javascript to do that? (I am a novice when it comes to javascript.)

Note: I use a hosted CMS and do not have access to any server side scripting.

EDIT:

I need to add CSS and META tags.

The CSS would be something like this:

<style type="text/css">
 .slideshow img { display: none }
 .slideshow img.first { display: block }
</style>

The META could look like this:

<meta property="og:title" content="Title Text" />
<meta property="og:type" content="article" />
<meta property="og:url" content="URL Path" />
<meta property="og:image" content="IMG Path" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="620" />
<meta property="og:image:height" content="541" />
<meta property="og:site_name" content="My Site" />

Those are examples but similar to what I will be adding.

What elements do you need to add to the head? CSS? JavaScript? Title tag? Meta tags? — JCOC611
– JCOC611, Commented Jul 22, 2012 at 1:34
@ColeJohnson - Many people. Most of the JavaScript API will do that. — Derek 朕會功夫
– Derek 朕會功夫, Commented Jul 22, 2012 at 1:35
@JCOC611 - I updated question to reflect what I would be adding, mainly META and CSS elements. — L84
– L84, Commented Jul 22, 2012 at 1:38

JCOC611 · Accepted Answer · 2012-07-22 01:44:10Z

1

For a CSS script:

var ele = document.createElement("style");
ele.type = "text/css";
ele.innerHTML = "CSS CODE"; // Replace with CSS code.
document.head.appendChild(ele);

For the Meta Tag (although I doubt it would work, since the software that looks at Meta Tags usually doesn't execute JavaScript code):

var ele = document.createElement("meta");
ele.property = "propertyName"; //Replace with property name.
ele.content = "CSS CODE"; // Replace with content.
document.head.appendChild(ele);

answered Jul 22, 2012 at 1:44

JCOC611

19.8k15 gold badges71 silver badges90 bronze badges

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

4 Comments

L84 Over a year ago

I believe you may be right about the meta tags. I tried the method for CSS and it worked in FF and IE9 but breaks in IE 8. Thoughts?

JCOC611 Over a year ago

Try it with document.body.appendChild(ele); (body instead of head), and see if it works.

JCOC611 Over a year ago

Yeah, but it probably works too! Anyway, another thing you might want to try is changing your DOCTYPE to trigger IE8 in Compatibility mode.

L84 Over a year ago

I added IE Conditional Comments for IE8 and below (inside the body tag.) For all other browsers I am using the JS above. Thanks!

Derek 朕會功夫 · Accepted Answer · 2012-07-22 01:33:50Z

1

var ele = document.createElement("script");  //Tag name
ele.src = "your_link.js";                    //URL
document.head.appendChild(ele);              //Insert into <head>
                                             //Done.

answered Jul 22, 2012 at 1:33

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

3 Comments

L84 Over a year ago

Thanks, I will give this a try and see what happens. One more question if I want to use CSS like my question (I updated it since your answer => ) How would I add that?

Derek 朕會功夫 Over a year ago

@Lynda - Take a look at JCOC611's answer, it answers all your questions. ;) By the way, you should use jQuery, it is super-convenience in adding elements and manipulating the DOM.

L84 Over a year ago

I do use jQuery on my site and am fully open to jQuery solutions. =>

Collectives™ on Stack Overflow

How can I insert CSS, META, etc. tags into the head tag using Javascript?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related