JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでDOMを更新する方法！ボタンクリックで要素を動的に追加するサンプルコード

JavaScriptでは、createElement()やcreateTextNode()、appendChild()といったメソッドを組み合わせることで、ページを再読み込みすることなく新しい要素を動的に生成し、DOM（Document Object Model）を更新できます。
以下は、ボタンのクリックをきっかけに新しい見出し要素を追加するシンプルなサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Update DOM JavaScript</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to create a new element</h3>
<script>
    let resEle = document.querySelector(".result");
    let heading = document.createElement("h3");
    document.querySelector(".Btn").addEventListener("click", () => {
        let headingText = document.createTextNode("This is a random heading");
        heading.appendChild(headingText);
        resEle.appendChild(heading);
    });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、最初は次のように表示されます。

JavaScriptでDOMを更新する方法！ボタンクリックで要素を動的に追加するサンプルコード

「CLICK HERE」ボタンをクリックすると、新しいh3要素が生成され、緑色の結果エリアに「This is a random heading」というテキストが追加されます。

JavaScriptでDOMを更新する方法！ボタンクリックで要素を動的に追加するサンプルコード

コードのポイント解説

  • document.createElement("h3")：新しいh3要素をメモリ上に作成します。この時点ではまだ画面には表示されません。
  • document.createTextNode()：実際に表示するテキストのノードを生成します。
  • appendChild()：テキストノードをh3要素に追加し、さらにそのh3要素を.resultクラスのdiv要素内に挿入することで、初めて画面に反映されます。
  • addEventListener("click", ...)：ボタンがクリックされたタイミングで上記の処理を実行するイベントリスナーを登録しています。

このように、要素の作成→テキストの追加→親ノードへの挿入という流れが、JavaScriptによるDOM更新の基本パターンです。応用すれば、リスト項目の追加やフォームの動的生成など、さまざまなUI操作に活用できます。

  1. JavaScriptの動的インポート（Dynamic Import）の使い方と実装例を解説

    JavaScriptの動的インポートとは 動的インポート（Dynamic Import）とは、JavaScriptのモジュールを必要なタイミングで読み込むための機能です。通常の静的なimport文と異なり、import()関数はPromiseを返すため、async/awaitやthen()と組み合わせて柔軟に扱うことができます。 これにより、ユーザーがボタンをクリックしたときなど、実際に必要になった瞬間にだけモジュールを読み込むことが可能になります。 動的インポートの基本構文 import()関数にモジュールのパスを渡すと、そのモジュールが非同期に読み込まれ、Promiseが解決された時点で

  2. JavaScriptのBigIntとは？使い方をサンプルコード付きで解説

    BigIntは、253 − 1 より大きい整数値を表現するために用意された組み込みオブジェクトです。 通常のNumber型で安全に扱える整数の上限は「Number.MAX_SAFE_INTEGER」（9007199254740991 = 253 − 1）までです。これを超える数値をNumber型で扱うと、計算誤差や精度の低下が発生してしまいます。そこで活躍するのがBigIntです。数値リテラルの末尾に「n」を付けるか、BigInt()関数を使用することで、どれほど巨大な整数でも正確に表現・演算できます。 以下は、JavaScriptでBigIntを使用する具体的なサンプルコードです。 サンプル