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

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

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

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

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

insertAdjacentHTMLで要素を挿入する

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

insertAdjacentHTMLの良いところは2点あります。挿入位置を指定することができる点と、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の閉じタグ直前に要素を挿入する方法のご紹介でした！