【JavaScript】headを取得して要素を追加する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでheadを取得して要素を追加する方法をご紹介しています。

JavaScriptでhead要素を取得して新しい要素を追加するにはどうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

head要素を取得する

JavaScriptでhead要素を取得する方法はいくつかありますが、代表的なものにdocumentのheadプロパティがあります。document.headは、現在開いているドキュメントのhead要素を返すプロパティです。

構文は下記の通りです。

const head = document.head;

これでドキュメントのhead要素を取得することができます。

上記ではdocument.headを使用しましたが、もちろんquerySelectorでhead要素を取得することも可能です。

const head = document.querySelector('head');

コーディング規約やソースにあわせて取得方法を選択していただければと思います。

head要素に新しい要素を追加する

head要素が取得できましたので、取得したhead要素に新しい要素を追加します。本記事では挿入位置をある程度指定することができるinsertAdjacentHTMLを使用します。使い方は下記でご紹介していますので、参考にしていただければ幸いです。

今回はhead要素内に新しい要素を追加したいのでafterBeginとbeforeEndの位置に追加します。 afterBeginは最初の子要素の前、 beforeEndは最後の子要素の後に新しい要素を追加します。

//head要素を取得
const head = document.head;

//最初の子要素の前に<title>を追加
head.insertAdjacentHTML('afterBegin', '<title>afterBegin</title>');

//最後の子要素の後に<title>を追加
head.insertAdjacentHTML('beforeEnd', '<title>beforeEnd</title>');

上記のスクリプトを実行するとhead要素の下記の位置にtitle要素が追加されます。

<head>
    <title>afterBegin</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <title>beforeEnd</title>
</head>

以上の方法でJavaScriptでhead要素を取得して新しい要素を追加することができます。

最後に

これまではdocument.writeを使って指定位置に要素を追加することができましたが、document.writeは現在は非推奨のメソッドになっています。今後要素の追加する場合にはinsertAdjacentHTMLを代替として使うようにしていただいて、制作済みのサイトでdocument.writeを使用している場合は更新のタイミング等でinsertAdjacentHTMLに置き換えていただければと思います。

以上、JavaScriptでheadを取得して要素を追加する方法のご紹介でした！