JavaScript で style タグを動的に追加

JavaScript Advent Calendar 2016 2日目の記事です。

jQuery を用いて style タグを動的に後から追加できます。
(jQuery 使わなくてもできるけど使ったほうが楽)

$(function(){
  $('head').append(
    `<style>
    div{
      color: blue;
    }
    div:hover{
      color: red;
    }
    </style>`
  );
});

スタイル文字列部分は ECMAScript 6 から採用されたテンプレートリテラルを用いています。（バッククォートで囲むと改行付きの文字列を定義できる。いわゆるヒアドキュメント的な。）