こんにちは、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を使用します。使い方は下記でご紹介していますので、参考にしていただければ幸いです。

【JavaScript】insertAdjacentHTMLでHTML要素を追加する【挿入位置指定】

今回は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を取得して要素を追加する方法のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。