デジタルトレンドナビ
システム開発

2024.02.16

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

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

Webページを構築する上で、要素を追加することは基本的な操作です。

JavaScriptには、要素を追加するためのさまざまなメソッドがありますが、中でもよく使われるのがappendChild()メソッドです。


この記事では、appendChild()メソッドの使い方を、初心者でもわかりやすく解説します。豊富な画像付きで丁寧に説明しているので、記事を読み終える頃には、あなたもappendChild()メソッドを使って、Webページを自由自在に操れるようになるでしょう!

この記事でわかること

  • appendChild()メソッドの使い方
  • サンプルコード

appendChild()メソッドとは

appendChild()メソッドとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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() メソッドの注意すべきポイント

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

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

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

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

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

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

appendChild()とappend()の違い

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開発への大きな一歩となります。

投稿者

  • デジタルトレンドナビ編集部

    システム開発、Webサイト制作、ECサイトの構築・運用、デジタルトランスフォーメーション(DX)など、デジタルビジネスに関わる多岐の領域において、最新のトレンド情報や実践的なノウハウを発信してまいります。