JavaScriptで要素を動的に追加する方法

Posted on by

JavaScriptを使用して、HTMLページに要素を動的に追加することは、
インタラクティブなウェブページを作成するための基本的なスキルです。
この記事では、JavaScriptコードを外部ファイルに置き、
ページが完全に読み込まれた後に要素を追加する方法について説明します。

HTMLの準備

まず、基本的なHTMLファイルを作成します。
このファイルには、CSSスタイルを含むヘッダとJavaScriptファイルを読み込むボディがあります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動的要素の追加</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

JavaScriptファイルの作成

次に、script.jsという名前のJavaScriptファイルを作成します。
このファイルには、ページが完全に読み込まれた後に実行されるコードが含まれています。

'use strict';

window.onload = function() {
    // 新しいdiv要素を作成
    const div = document.createElement('div');
    console.log(div); // 中身を確認するためのログ出力

    // divにクラスを追加
    div.classList.add('box');

    // divにクリックイベントリスナーを追加
    div.addEventListener('click', function() {
        div.classList.toggle('highlight');
    });

    // divをボディに追加
    document.body.appendChild(div);
};

説明

window.onloadイベント

window.onloadイベントを使用すると、ページ上のすべてのリソース（HTML、CSS、画像など）が完全に読み込まれた後にスクリプトを実行することができます。これにより、DOM操作を行う際に要素が存在しないというエラーを防ぐことができます。

window.onload = function() {
    // スクリプトの内容
};

要素の作成と操作

新しいdiv要素を作成し、console.logを使用してその内容を確認します。次に、そのdivにクラスを追加し、クリックイベントを設定します。クリックイベントでは、クラスをトグル（切り替え）して、スタイルを変更します。

const div = document.createElement('div');
console.log(div);
div.classList.add('box');

div.addEventListener('click', function() {
    div.classList.toggle('highlight');
});

要素の追加

最後に、作成したdiv要素をボディに追加します。これにより、ページ上に新しい要素が表示されます。

document.body.appendChild(div);

完成したページの動作確認

ブラウザでこのHTMLファイルを開くと、青い四角形が表示されます。
この四角形をクリックすると、黄色に変わります。
これにより、動的に要素を追加し、インタラクションを持たせる方法が理解できるでしょう。