こんにちは、フローです。
今回は、JavaScriptの中でも特に重要なメソッド、
appendChild()について詳しく解説します。
複雑なように思えるかもしれませんが、
一緒に丁寧に見ていくことで、きっと理解できるようになります。
appendChild()とは
JavaScriptには、既存のHTML要素に新たな要素を追加するためのメソッド、
appendChild()があります。
これを使用することで、
プログラムから動的にWebページの内容を変更することが可能になります。
どんな時に使うのか？
appendChild()は、新しい要素を既存の要素の最後に追加するために使います。
例えば、
リストの最後に新しいアイテムを追加したり、
新しい段落を文章の最後に追加したりする際に使います。
パターン3つ
それでは、appendChild()をどのように使うのか、
具体的な例を見てみましょう。
新しいリストアイテムを追加
let li = document.createElement("li");
li.textContent = "新しいアイテム";
let ul = document.querySelector("ul");
ul.appendChild(li);
上記のコードでは、
まず新しいリストアイテムliを作成し、
そのテキスト内容を”新しいアイテム”と設定します。
次に、既存のul要素を選択し、
appendChild()を使って新しいアイテムをリストの最後に追加します。
新しい段落を追加
let p = document.createElement("p");
p.textContent = "これは新しい段落です。";
let div = document.querySelector("div");
div.appendChild(p);
この例では、新しいp要素を作成し、
そのテキスト内容を”これは新しい段落です。”と設定します。
そして、既存のdiv要素に対して新しい段落を追加します。
新しい画像を追加
let img = document.createElement("img");
img.src = "image.jpg";
let div = document.querySelector("div");
div.appendChild(img);
上記のコードでは、新しいimg要素を作成し、
そのsrc属性を”image.jpg”に設定します。
そして、div要素に新しい画像を追加します。
appendChild()の注意点
しかし、appendChild()の使用には注意が必要です。
というのも、
appendChild()は元の要素から新しい要素を削除し、
新しい親要素の最後に移動する性質があるからです。
以下のコードを見てみましょう。
let div1 = document.querySelector("#div1");
let div2 = document.querySelector("#div2");
let p = document.querySelector("p");
div1.appendChild(p); // div1にpを追加
div2.appendChild(p); // pがdiv1からdiv2に移動
このコードでは、最初にp要素をdiv1に追加します。
次に、同じp要素をdiv2に追加しようとすると、
pはdiv1から削除されてdiv2に移動します。
これは初学者にとって予想外の結果をもたらす可能性があるので、注意が必要です。
まとめ
以上がJavaScriptのappendChild()についての解説です。
このメソッドは、HTML要素を動的に追加する際に非常に役立つツールですが、
使い方によっては予期しない結果をもたらすこともあります。
今回のブログが、皆さんのプログラミング学習の一助となることを願っています。
新たな知識を身につけることは難しいかもしれませんが、
一歩ずつ確実に進んでいきましょう。
次回もお楽しみに。
レッツチャレンジ！
最近のコメント