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

しゅーた(@chibasyuta)です!
この記事では「appendChild()」の使い方の解説をします!
「appendChild()」を使うと、「document.createElement()」で生成したHTML要素を、別の要素の子要素として追加することができます。
この記事の内容!
- 「appendChild()」を使うと何ができるのか?
- 「appendChild()」の使い方!

それでは内容へ入ります!
「appendChild()」を使うと何ができるのか?

「document.createElement()」は、新しい要素を作成するだけで、それをページ上に表示するわけではありません。
作成した要素をWebページに追加するには、「appendChild()」を使用すればOKです!
「document.createElement()」についてはこちらの記事で解説しています!
【JavaScript】「document.createElement()」の使い方!【要素の幅を取得】
「appendChild()」の使い方!


基本構文
親要素.appendChild(子要素);
こちらが基本的な構文となります。
親要素:子要素を追加したいHTML要素。
子要素:追加したいHTML要素。
具体例!
<div id="container"></div>
// 新しい要素を作成
const newElement = document.createElement('p');
// テキストを追加
newElement.textContent = 'これは新しい段落です。';
// 親要素を取得
const container = document.getElementById('container');
// 親要素に子要素を追加
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
おすすめの再生リスト!
こちらは僕が制作したYouTubeの再生リスト「JavaScriptの入門編」です。
「JavaScriptの入門編」はWeb制作を勉強している方がJavaScriptに入門する際に知っておきたい情報をまとめたコンテンツとなります。
こちらの再生リストで「JavaScript」について「丁寧」に解説しているので、もし気になる方はチェックしてみてください!一緒に楽しく学習しましょう!!
まとめ
この記事では「appendChild()」の使い方の解説をしました!
「appendChild()」を使うと、HTML要素を、別の要素の子要素として追加することができます。
「appendChild()」は、DOM操作を行う際に基本となるメソッドの1つです。新しい要素を作成して、Webページに追加したい場合に、非常に役立ちます。
基本的な使い方を覚えることで、より自由にWebページを操作可能になります。
複雑なDOM構造を扱う際にも重要な役割を果たします。
ぜひ実際にコードを書いて試してみてください!


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