JavaScriptでは、HTMLに書かれていない要素を、後から動的に追加することができます。
この仕組みは、メッセージ表示やUIの切り替えなど多くのWebサイトで使われています。
この記事では、createElement() を起点に、textContent、appendChild() までの流れを通して、
JavaScriptでHTML要素を動的に追加する基本的な考え方を初学者向けに解説します。
JavaScriptでHTML要素を追加する全体の流れ
JavaScriptでHTML要素を動的に追加する処理は、次の3ステップで構成されています。
- HTML要素を新しく作成する =
createElement() - 要素の中身を設定する =
textContent - HTMLに追加する =
appendChild()
それぞれの役割を理解することで、DOM操作が分かりやすくなります。
元となるHTMLの構造
JavaScriptで作成したHTML要素を追加するために、
あらかじめ 追加先となる要素 をHTMLに用意しておきます。
<div id="container"></div>この div 要素が、JavaScriptで作成したHTML要素の 受け皿 になります。
JavaScript側では、この要素を指定して、新しいHTML要素を追加します。
createElement()でHTML要素を作成する
最初に行うのが、createElement() を使ったHTML要素の作成です。
const element = document.createElement('p');このコードで <p> 要素が作成されます。
ただし、この時点では まだHTMLには追加されていません。
createElement() は、HTML要素を作成するだけで、
画面に表示する処理は含まれていない点がポイントです。
textContentで要素の中身を設定する
次に、作成した要素にテキストを設定します。
element.textContent = 'テキストが入ります';これにより、要素の中身が決まります。
ここまでで、要素の完成形は次のような状態です。
<p>テキストが入ります</p>ただし、まだHTMLに追加していないため、画面には表示されません。
appendChild()でHTMLに追加する
最後に、作成した要素をHTMLに追加します。
const container = document.getElementById('container');
container.appendChild(element);appendChild() を使うことで、
指定した要素の中に、新しいHTML要素が追加されます。
この処理を行って、はじめて画面に表示されます。
一連の処理をまとめたコード例
ここまでの処理をまとめると、次のようになります。
const element = document.createElement('p');
element.textContent = 'テキストが入ります';
const container = document.getElementById('container');
container.appendChild(element);JavaScriptでHTML要素を動的に追加する場合は、この形が基本になります。
まとめ
JavaScriptでHTML要素を動的に追加するには、
という流れを理解することが重要です。
作成しただけでは画面に表示されないため、最後にHTMLへ追加する処理が必要という点を押さえておくと、DOM操作が理解しやすくなります！
NAMEKO.ONLINE では、Web開発初学者向けのコンテンツを発信しております！
ぜひ、多くの方にシェアいただけますと嬉しいです！
コメント