【JavaScript】bodyの閉じタグ直前に要素を挿入する

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

本記事では、JavaScriptでbodyの閉じタグ直前に要素を挿入する方法をご紹介しています。

JavaScriptでbodyの閉じタグ直前に要素を挿入したいんだけど、良い方法ないかな?

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

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

insertAdjacentHTMLで要素を挿入する

insertAdjacentHTMLElementのメソッドです。2つの引数が指定可能で、第1引数に指定した位置に第2引数に指定したノード(HTML要素やテキスト等)を挿入することができます。詳細は下記で解説していますのであわせてご参照ください。

insertAdjacentHTMLの良いところは2点あります。挿入位置を指定することができる点と、HTMLのタグをそのまま指定することができる点です。

body要素のこの場所にHTML要素を挿入したい!

このような目的を達成する場合に最適なメソッドとなっています。

bodyの閉じタグ直前に要素を挿入する

bodyの閉じタグ直前に要素を挿入するサンプルをご紹介します。要素を挿入するため、スクリプトを実行するタイミングはDOMを構築してページの読み込みが完了した後が良いと思います。そのためwindow.onload内でスクリプトを実行します。

挿入位置はbodyの閉じタグ直前(最後の子要素の後)なので、第1引数にはbeforeendを指定します。

JavaScript

window.onload = ()=>{
    const body = document.body;
    const html = '<p>挿入するHTML</p>';

    body.insertAdjacentHTML('beforeend', html);
};

これでbodyの閉じタグ直前に任意の要素を挿入することができます。

最後に

本記事でご紹介した内容は、コンバージョンタグやトラッキングタグの挿入はもちろん、管理画面上で部分的にHTMLを編集することができるサービスを使っている場合に便利です。現状要素の挿入についてはinsertAdjacentHTMLを覚えておけば何とかなりますので、何度か使用して構文に慣れておくこと良いかもしれませんね!

以上、JavaScriptでbodyの閉じタグ直前に要素を挿入する方法のご紹介でした!

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マスター講座はこちら