2025/01/26 (更新日:2025/01/26)

【JavaScript】「appendChild()」の使い方！【要素をWebページに追加】

Categories > JavaScriptの入門編

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事では「appendChild()」の使い方の解説をします！

「appendChild()」を使うと、「document.createElement()」で生成したHTML要素を、別の要素の子要素として追加することができます。

この記事の内容！

「appendChild()」を使うと何ができるのか？
「appendChild()」の使い方！

また、下の動画でも「appendChild()」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「appendChild()」を使うと何ができるのか？

「appendChild()」を使うと、「document.createElement()」で生成したHTML要素を、別の要素の子要素として追加することができます。

「document.createElement()」は、新しい要素を作成するだけで、それをページ上に表示するわけではありません。

作成した要素をWebページに追加するには、「appendChild()」を使用すればOKです！

「document.createElement()」についてはこちら！

「document.createElement()」についてはこちらの記事で解説しています！

【JavaScript】「document.createElement()」の使い方！【要素の幅を取得】

「appendChild()」の使い方をまとめます！

わーい！

基本構文

親要素.appendChild(子要素);

こちらが基本的な構文となります。

親要素：子要素を追加したいHTML要素。

子要素：追加したいHTML要素。

具体例！

<div id="container"></div>

// 新しい要素を作成
const newElement = document.createElement(&#039;p&#039;);

// テキストを追加
newElement.textContent = &#039;これは新しい段落です。&#039;;

// 親要素を取得
const container = document.getElementById(&#039;container&#039;);

// 親要素に子要素を追加
container.appendChild(newElement);

このように書くと、ページ内の「id=”container”」を持つ要素に、「これは新しい段落です。」というテキストを持つ「p 要素」が追加されます。

複数の要素を追加することも可能！

<ul id="list"></ul>

// 親要素を取得
const list = document.getElementById('list');

// 配列でデータを用意
const items = ['りんご', 'みかん', 'ぶどう'];

// 各データをリストに追加
items.forEach(item => {
    const listItem = document.createElement('li'); // 新しい<li>要素を作成
    listItem.textContent = item; // テキストを設定
    list.appendChild(listItem); // <ul>に追加
});

実行結果：

りんご

みかん

ぶどう

が順番にリストとして表示されます。

参考リンク！

仕様書。
https://dom.spec.whatwg.org/#dom-node-appendchild

MDN。
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild

まとめ

この記事では「appendChild()」の使い方の解説をしました！

「appendChild()」を使うと、HTML要素を、別の要素の子要素として追加することができます。

「appendChild()」は、DOM操作を行う際に基本となるメソッドの1つです。新しい要素を作成して、Webページに追加したい場合に、非常に役立ちます。

基本的な使い方を覚えることで、より自由にWebページを操作可能になります。

複雑なDOM構造を扱う際にも重要な役割を果たします。

ぜひ実際にコードを書いて試してみてください！

分かりやすかった！

こんな感じですかね！

また、下の動画でも「appendChild()」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

またね！