JQuery добавить css в голову

Я асинхронно добавляю несколько скриптов и таблиц стилей в проект, который я создаю, и хотел бы, чтобы таблицы стилей были сгруппированы вместе в 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>

В настоящее время я использую

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

который отлично работает, но он добавляет его к нижней части моего раздела HEAD, как вы можете видеть в примере.

OCD во мне хотел бы добавить его либо до моей первой ссылки стиля, либо после последней ссылки стиля.

Спасибо, что посмотрели.

Ответы

Ответ 1

Это поместит новый link после последнего link уже в ваш элемент head.

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

Однако, если у вас еще нет link, это не добавит новый link. Поэтому сначала выполните проверку:

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);
}

OCD во мне хотел бы добавить его либо до моего первого стиля ссылки или после последней ссылки стиля.

Вы должны решить, где именно будет размещаться link. Это шанс, что другая позиция может переопределить существующие стили.