createElementとappendChildの使用 | 要素の追加と削除 | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

createElementとappendChildとは？

JavaScriptでは、HTML要素を動的に追加したり削除したりできます。

その中でも、createElement()とappendChild()は、新しいHTML要素を作成してページへ追加するための基本的なメソッドです。

例えば、「ボタンを押したらリストを追加する」「新しいメッセージを表示する」といった機能は、この2つのメソッドを利用して実現できます。

createElementとは？

createElement()は、新しいHTML要素を作成するためのメソッドです。

このメソッドを実行しただけでは画面には表示されません。あくまでも「新しい要素を作る」だけです。

基本的な使い方

// 新しい<p>要素を作成
const newElement = document.createElement("p");

// テキストを設定
newElement.textContent = "これは新しい段落です。";

この時点では、<p>要素は作成されていますが、まだページには表示されていません。

• document.createElement("p")で新しい段落を作成します。
• textContentで表示する文字を設定します。
• まだDOMには追加されていないため、画面には表示されません。

appendChildとは？

appendChild()は、作成した要素を既存の要素の最後へ追加するメソッドです。

createElement()で作成した要素は、通常このメソッドでページへ追加します。

基本的な使い方

// 親要素を取得
const parentElement = document.getElementById("content");

// 作成した要素を追加
parentElement.appendChild(newElement);

このコードを実行すると、新しく作成した段落がid="content"の中へ追加されます。

• 親要素を取得します。
• appendChild()で子要素として追加します。
• 追加された時点で画面に表示されます。

createElementとappendChildを組み合わせる

実際には、この2つをセットで使用することがほとんどです。

新しいリスト項目を追加する例

// 新しい<li>要素を作成
const newItem = document.createElement("li");

// テキストを設定
newItem.textContent = "新しいリストアイテム";

// リストを取得
const list = document.getElementById("myList");

// リストの最後へ追加
list.appendChild(newItem);

この例では、新しいリスト項目を作成し、既存のリストの最後へ追加しています。

処理の流れ

createElement()とappendChild()は、次のような順番で利用します。

1. createElement()で要素を作成する。
2. textContentなどで内容を設定する。
3. appendChild()で親要素へ追加する。

この流れを覚えておくと、多くのDOM操作に応用できます。

appendChildの特徴

appendChild()には、いくつか知っておきたい特徴があります。

• 追加される位置は、親要素の最後になります。
• 同じ要素を別の場所へ追加すると、コピーではなく移動になります。
• 追加すると、その要素はDOMの一部となり画面へ表示されます。

要素が移動する例

const item = document.createElement("p");
item.textContent = "移動する要素";

const box1 = document.getElementById("box1");
const box2 = document.getElementById("box2");

box1.appendChild(item);

// 同じ要素を追加するとbox1からbox2へ移動する
box2.appendChild(item);

この例では、新しい要素は最初にbox1へ追加されますが、その後box2へ移動します。同じ要素が2つになるわけではありません。

createElementとappendChildの比較

どちらか一方だけでは新しい要素を表示できません。通常はセットで利用します。

appendChild以外の追加方法

最近のJavaScriptでは、append()というメソッドもよく使われます。

ただし、DOM操作の基本を学ぶ段階では、まずcreateElement()とappendChild()を理解することが重要です。

まとめ

• createElement()は、新しいHTML要素を作成するメソッドです。
• appendChild()は、作成した要素を親要素へ追加するメソッドです。
• createElement()だけでは画面には表示されません。
• appendChild()を実行すると、ページへ表示されます。
• appendChild()は親要素の最後へ追加します。
• 同じ要素を別の場所へ追加すると、コピーではなく移動になります。
• JavaScriptでDOMを操作する際の基本となる重要なメソッドです。