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-28 07:34:33Z

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, 2015 at 7:34

answered Aug 23, 2012 at 14:08

Curtis

104k69 gold badges280 silver badges359 bronze badges

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

6 Comments

Ben Lesh Over a year ago

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.

Curtis Over a year ago

@blesh Cheers, likewise your answer doesn't take in account what happens if there are no link elements already.

Ben Lesh Over a year ago

Meh, I'm deleting my answer then and removing my downvote. I'd fix a few things about yours however... I'd create the <link string in a seperate variable so it's not declared twice, and I'd also use the :last selector rather than .last(), so the selector is selecting exactly what I want, rather than making two method calls for no reason.

Ben Lesh Over a year ago

Also, +1 for the most complete answer.

Deac Karns Over a year ago

your solution works great. I modified it a bit to add the link to the begining of the style block $headlink.first().before();. Thanks.

|

Andrea Turri · Accepted Answer · 2012-08-23 14:08:12Z

6

you can use:

.prepend()

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

answered Aug 23, 2012 at 14:08

Andrea Turri

6,5207 gold badges41 silver badges64 bronze badges

Collectives™ on Stack Overflow

Jquery add css to head

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related