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

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

head要素を取得する

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

構文は下記の通りです。

const head = document.head;

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

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

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

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

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

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

今回はhead要素内に新しい要素を追加したいのでafterBeginbeforeEndの位置に追加します。 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を取得して要素を追加する方法のご紹介でした!

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

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

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら