JavaScriptで要素を追加！appendChildの使い方を徹底解説

appendChild()メソッドとは

「appendChild()」とは、JavaScriptで使用される非常に重要なメソッドの一つです。

このメソッドは、特定の親要素（parentNode）に新しい子要素（childNode）を追加するために使用されます。

例えば、あるdiv要素に新しいp要素を追加したい場合、appendChild()メソッドを使ってこれを実現できます。

使用方法はシンプルで、まず新しい要素を作成（例：document.createElement(‘p’)）し、その後、appendChild()を使って親要素に追加します（例：parentNode.appendChild(childNode)）。
これにより、DOM（Document Object Model）が動的に更新され、Webページに新しい要素が表示されます。

appendChild()はWeb開発において非常によく使われるため、JavaScriptを学ぶ際には欠かせない知識となります。

合わせて読みたい

JavaScriptのincludesメソッド：配列や文字列に要素が含まれているかどうかを確認する便利な方法 | デジタルトレンドナビ

JavaScriptのincludesメソッドを使った配列や文字列内の要素検索方法を初心者向けに解説します。基本的な使い方から応用例、注意点まで紹介。

appendChild()メソッドの基本的な使い方

appendChild()メソッドの基本的な使い方をご紹介します。

準備するものは、Webブラウザ・テキストエディタです。

appendChild()メソッドは、親要素の子要素の末尾に新しい要素を追加します。

下記コードは、parentというIDを持つ要素の子要素の末尾に、div要素を追加します。

const parentElement = document.getElementById("parent");
const childElement = document.createElement("div");

// 子要素を追加
parentElement.appendChild(childElement);

appendChild()メソッドのサンプルコード

続いては、appendChild()メソッドを使ってさまざまな要素を追加してみましょう。

1. テキストを追加する

const parentElement = document.getElementById("parent");
const textNode = document.createTextNode("Hello, world!");

// テキストノードを追加
parentElement.appendChild(textNode);

2. 画像を追加する

const parentElement = document.getElementById("parent");
const imageElement = document.createElement("img");

imageElement.src = "image.jpg";

// 画像要素を追加
parentElement.appendChild(imageElement);

3. リストを追加する

const parentElement = document.getElementById("parent");
const listElement = document.createElement("ul");

// リスト要素の子要素として、リスト項目を追加
for (let i = 0; i < 3; i++) {
const listItemElement = document.createElement("li");
listItemElement.textContent = `Item ${i + 1}`;
listElement.appendChild(listItemElement);
}

// リスト要素を追加
parentElement.appendChild(listElement);

appendChild() メソッドの注意すべきポイント

cloneNode() を使用すると、新しい親の下にノードを追加する前に、そのノードのクローンを作成できます。

ただし、cloneNode を使用して作成されたノードのコピーは自動的に更新されないことに注意してください。

また、appendChild() メソッドを使用して、別のドキュメントに属する要素を追加することはできません。

そのためには、まず importNode または adoptNode を使用して外部要素をインポートし、次に appendChild() を使用してそれらを希望の位置に挿入する必要があります。

要素から子を削除するには removeChild メソッドを使用します。

appendChild()とappend()の違い

1. ノード・オブジェクトと DOMString オブジェクトの違い

parentNode.appendChild()はNodeオブジェクトのみを追加でき、追加されたNodeオブジェクトを返しますが、parentNode.append()はDOMStringオブジェクトも追加でき、戻り値はありません。

2. 単一引数と複数引数の比較

さらに、parentNode.appendChild() では 1 つのノードのみを追加できますが、parentNode.append() では複数の引数をサポートしているため、複数のノードや文字列を追加できます。

まとめ

JavaScriptの基本的かつ強力な機能であるappendChild()メソッドについて詳しく解説しました。

appendChild()メソッドは、新しい要素を既存の要素の子として追加するために使用され、これにより動的にWebページの内容を変更することが可能になります。

サンプルコードを通じて、テキスト、画像、リストなどの異なるタイプの要素を追加する方法を学びました。

これらの例を実践することで、読者はappendChild()メソッドの基本から応用までを理解し、自分のWebページをより動的で魅力的にするスキルを身につけることができるでしょう。appendChild()は、JavaScriptにおいて非常に重要なメソッドであり、これをマスターすることは、効果的なWeb開発への大きな一歩となります。

合わせて読みたい

【初心者でも分かる】JavaScriptとは | デジタルトレンドナビ

この記事では、プログラミング初心者向けにJavaScriptの基礎を解説します。JavaScriptとは何か、その特性や利点、そして効果的な学習方法だけでなく実際のサンプルコードを示して、実際のプログラミングの流れを理解しやすくします。