How to add anything in <head> through jquery/javascript?

Question

I'm working with a CMS, which prevents editing HTML source for <head> element.

For example I want to add the following above the <title> tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This doesn't make sence... The head is parsed prior to the execution of javascript. Adding meta stuf to the head via javascript would not have the desired effect. — Andre Haverdings
– Andre Haverdings, Commented Dec 14, 2009 at 13:32
While not related to the CMS question, it can make sense to add meta tags in certain circumstances. There are various browser addons and javascript injections that use data that is in the meta tags to gather information. Facebook's OpenGraph is one example. Injecting meta tags into the head is needed when you don't have direct access to the originating HTML, whether by fault of a CMS or because you are writing a javascript addon/injection yourself. — conceptDawg
– conceptDawg, Commented Jan 31, 2011 at 23:07
Note that it's possible that adding <meta> tags dynamically will have no effect, depending on what they are and what browser is involved. — Pointy
– Pointy, Commented May 9, 2016 at 14:18
Good point, that's what happens when one focuses too much on the problem ;-) — mb897038
– mb897038, Commented May 9, 2016 at 14:21

nickf · Accepted Answer · 2009-12-14 13:19:13Z

173

You can select it and add to it as normal:

$('head').append('<link />');

answered Dec 14, 2009 at 13:19

nickf

548k199 gold badges660 silver badges727 bronze badges

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

9 Comments

Jitendra Vyas Over a year ago

how can i control order , where this link will be placed

nickf Over a year ago

Read the documentation: docs.jquery.com/Manipulation insertBefore, insertAfter is what you want.

serpent403 Over a year ago

I have put this in document.ready, but it doesn't append to my head contents

Pankaj Tiwari Over a year ago

It is adding link, but link not showing in page's view Source... I can view it from browser development tools like Firebug. Can I view link in view source also?

Bernhard Hofmann Over a year ago

@PankajTiwari You won't see it in the source view because the code appends it to the current document, not the original source (which was provided by the server). That's why FireBug and Chrome Dev tools are so useful.

|

Mario Petrovic · Accepted Answer · 2022-01-20 17:10:14Z

158

JavaScript:

document.getElementsByTagName('head')[0].appendChild( ... );

Make DOM element like so:

const link = document.createElement('link');
link.href = 'href';
link.rel = 'rel';

document.getElementsByTagName('head')[0].appendChild(link);

edited Jan 20, 2022 at 17:10

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

answered Nov 29, 2011 at 19:56

Joshua Woodward

1,5891 gold badge9 silver badges2 bronze badges

1 Comment

Ray Foss Over a year ago

Works with script elements!

David Hedlund · Accepted Answer · 2009-12-14 13:20:02Z

33

jQuery

$('head').append( ... );

JavaScript:

document.getElementsByTagName('head')[0].appendChild( ... );

answered Dec 14, 2009 at 13:20

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

2 Comments

fredrik Over a year ago

dosen't appendChild require a DOM-element? ie. var elem = document.createElement() document.getElementsByTagName('head')[0].appendChild( elem );

David Hedlund Over a year ago

well yes. i just left that part as ... because i didn't feel that was a central part of the question, and also, at the time of writing, there was no hands-on example as to what he wanted to put in head. but yes, it does need to be a DOM-element.

Jivings · Accepted Answer · 2016-05-09 14:20:47Z

18

You can use innerHTML to just concat the extra field string;

document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet>...'

However, you can't guarantee that the extra things you add to the head will be recognised by the browser after the first load, and it's possible you will get a FOUC (flash of unstyled content) as the extra stylesheets are loaded.

I haven't looked at the API in years, but you could also use document.write, which is what was designed for this sort of action. However, this would require you to block the page from rendering until your initial AJAX request has completed.

answered May 9, 2016 at 14:20

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

1 Comment

Harendra Chauhan Over a year ago

You can also use document.head.innerHTML += '<link rel="stylesheet>...' Just Short of your Code

Benny Neugebauer · Accepted Answer · 2014-03-25 12:17:37Z

13

In the latest browsers (IE9+) you can also use document.head:

Example:

var favicon = document.createElement('link');
favicon.id = 'myFavicon';
favicon.rel = 'shortcut icon';
favicon.href = 'http://www.test.com/my-favicon.ico';

document.head.appendChild(favicon);

answered Mar 25, 2014 at 12:17

Benny Neugebauer

55.4k31 gold badges250 silver badges209 bronze badges

Comments

Marat Tanalin · Accepted Answer · 2018-03-11 16:54:20Z

12

Create a temporary element (e. g. DIV), assign your HTML code to its innerHTML property, and then append its child nodes to the HEAD element one by one. For example, like this:

var temp = document.createElement('div');

temp.innerHTML = '<link rel="stylesheet" href="example.css" />'
               + '<script src="foobar.js"><\/script> ';

var head = document.head;

while (temp.firstChild) {
    head.appendChild(temp.firstChild);
}

Compared with rewriting entire HEAD contents via its innerHTML, this wouldn’t affect existing child elements of the HEAD element in any way.

Note that scripts inserted this way are apparently not executed automatically, while styles are applied successfully. So if you need scripts to be executed, you should load JS files using Ajax and then execute their contents using eval().

edited Mar 11, 2018 at 16:54

answered May 9, 2016 at 20:03

Marat Tanalin

14.2k1 gold badge38 silver badges53 bronze badges

6 Comments

mb897038 Over a year ago

That is how I do it in the body, but can that really be done inside the head-tag? I was under the impression that the only allowed tags where base, link, meta, title, style and script?

Marat Tanalin Over a year ago

AFAICT, you have exactly those elements in your Ajax response. Don't you?

mb897038 Over a year ago

Indeed, but I still can't make it work with a div inside the head tag. It seems like Chrome is "smart" enough to display the content of the div in the body anyway.

Marat Tanalin Over a year ago

You've probably not read the answer carefully. ;-) The DIV element is just a temporary container for the purpose of parsing HTML code. You shouldn't insert the DIV itself to the HEAD. You should insert its child nodes. Please see the example I've added to the answer.

Marat Tanalin Over a year ago

@GaetanL. “While there are child elements inside the temp element.” See Node.firstChild() docs.

|

KingRider · Accepted Answer · 2016-03-24 11:57:53Z

5

Try a javascript pure:

Library JS:

appendHtml = function(element, html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    while (div.children.length > 0) {
        element.appendChild(div.children[0]);
    }
}

Type: appendHtml(document.head, '<link rel="stylesheet" type="text/css" href="http://example.com/example.css"/>');

or jQuery:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'http://example.com/example.css'));

answered Mar 24, 2016 at 11:57

KingRider

2,26728 silver badges24 bronze badges

Comments

Dave · Accepted Answer · 2013-12-14 11:43:11Z

-6

With jquery you have other option:

$('head').html($('head').html() + '...');

anyway it is working. JavaScript option others said, thats correct too.

answered Dec 14, 2013 at 11:43

Dave

7,42911 gold badges40 silver badges66 bronze badges

5 Comments

Quentin Over a year ago

That will delete the existing content and generate new elements. This can have undesirable side effects such as losing dynamically set DOM properties and causing scripts to be re-executed.

Dave Over a year ago

for this reason you should use before $('head').html() to recover all the DOM properties

Quentin Over a year ago

Using .html() won't recover all the DOM properties. (The most common instance of this problem, and the most visible, is when using similar code to add new fields to a form. The value attribute represents the default value of a field, so getting html() and then setting it back will reset all the existing fields to their default values).

Dave Over a year ago

I can sure you I tested it in my code and it is working and all the DOM properties Works. Please, test yourself, I am working IE11

user5066707 Over a year ago

Things that may be removed are events also.

Collectives™ on Stack Overflow

How to add anything in <head> through jquery/javascript?

8 Answers 8

9 Comments

1 Comment

2 Comments

1 Comment

Comments

6 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

9 Comments

1 Comment

2 Comments

1 Comment

Comments

6 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related