Jquery add css to head

Question

I am asynchronously adding a few scripts and style sheets to a project that I am building and would like to keep the style sheets all grouped together in the HEAD.

<head>
  <title>home</title>
  <meta charset="utf-8">
  <link rel="Shortcut Icon" type="image/ico" href="/img/favicon.png">

  <!-- STYLES-->
  <link rel="stylesheet" href="/css/fonts-and-colors.css" type="text/css" media="screen"> 
  <link rel="stylesheet" href="/css/layout.css" type="text/css" media="screen">

  <!-- JS-->
  <script type="text/javascript" async="" src="/js/light-box.js"></script>
  <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="/js/grade-button.js"></script>
  <script>
    $(document).ready(function() {
        // some code
    });
  </script>
  <link rel="stylesheet" href="/css/masterBlaster.css" type="text/css" media="screen">
</head>

I am currently using

$("head").append("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");

which works fine, but it adds it to the bottom of my HEAD section as you can see in the example.

The OCD in me would like to add it either before my first style link or after the last style link.

Thanks for looking.

Curtis · Accepted Answer · 2015-08-28T07:34:33.640

41

This will place the new link after the last link already in your head element.

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");

However if you don't already have a link in place this won't add the new link. Therefore you should do a check first:

var $head = $("head");
var $headlinklast = $head.find("link[rel='stylesheet']:last");
var linkElement = "<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>";
if ($headlinklast.length){
   $headlinklast.after(linkElement);
}
else {
   $head.append(linkElement);
}

The OCD in me would like to add it either before my first style link or after the last style link.

You should decide where exactly the link is going to be placed. Theres a chance a different position might override existing styles.

edited Aug 28 '15 at 07:34

answered Aug 23 '12 at 14:08

Curtis

101,612
66
270
352

Good answer, looks like we answered at the same time. However, this will insert it after the last of any link element in the head, not just the last stylesheet link as requested. – Ben Lesh Aug 23 '12 at 14:13
@blesh Cheers, likewise your answer doesn't take in account what happens if there are no `link` elements already. – Curtis Aug 23 '12 at 14:16
1

Meh, I'm deleting my answer then and removing my downvote. I'd fix a few things about yours however... I'd create the – Ben Lesh Aug 23 '12 at 14:23
Also, +1 for the most complete answer. – Ben Lesh Aug 23 '12 at 14:24
@blesh Cheers for comments, I've made some changes so that less calls are made – Curtis Aug 23 '12 at 14:28
1

your solution works great. I modified it a bit to add the link to the begining of the style block `$headlink.first().before();`. Thanks. – Deac Karns Aug 23 '12 at 14:41

score 6 · Answer 2 · answered Aug 23 '12 at 14:08

6

you can use:

.prepend()

http://api.jquery.com/prepend/

answered Aug 23 '12 at 14:08

Andrea Turri

6,480
7
37
63

Jquery add css to head

2 Answers2

Linked