【中学生でもわかる】JavaScriptのinsertBefore()について

programming
学習コースキャンペーンバナー

こんにちは、フローです。

今回は、JavaScriptで頻繁に使われる

insertBefore()メソッドについて学びます。

一見複雑に見えるこのメソッドも、基本を理解すれば誰でも使いこなせます。

一緒に学びましょう。

insertBefore()とは

JavaScriptのinsertBefore()メソッドは、

指定した参照要素の前に新しい要素を挿入するために使用します。

これはHTML要素を動的に操作する際に非常に役立ちます。

どんな時に使うのか

insertBefore()は、既存のHTML要素の特定の位置に新しい要素を挿入するときに使用します。

例えば、

リストの特定のアイテムの前に新しいアイテムを追加したいときや、

特定の段落の前に新しい段落を挿入したいときなどに使います。

パターン3つ

それでは、insertBefore()をどのように使うのか、

具体的な例を見てみましょう。

リストの先頭に新しいアイテムを追加

let li = document.createElement("li");
li.textContent = "新しいアイテム";
let ul = document.querySelector("ul");
ul.insertBefore(li, ul.firstChild);

このコードでは、

新しいリストアイテムを作成し、

そのテキストを”新しいアイテム”と設定しています。

次に、ul要素の先頭にこの新しいアイテムを追加しています。

特定の要素の前に新しい段落を追加

let p = document.createElement("p");
p.textContent = "これは新しい段落です。";
let div = document.querySelector("div");
let reference = document.querySelector("#reference");
div.insertBefore(p, reference);

ここでは、新しい段落を作成し、

そのテキストを”これは新しい段落です。”と設定しています。

そして、

div内の特定の要素(ここではidが”reference”の要素)の前に新しい段落を挿入しています。

特定の要素の前に新しい画像を追加

let img = document.createElement("img");
img.src = "image.jpg";
let div = document.querySelector("div");
let reference = document.querySelector("#reference");
div.insertBefore(img, reference);

このコードでは、新しい画像を作成し、

そのsrcを”image.jpg”に設定しています。

そして、

div内の特定の要素(ここではidが”reference”の要素)の前に新しい画像を挿入しています。

insertBefore()の注意点

ただし、insertBefore()を使うときには注意が必要です。

参照要素の親に対して呼び出す必要があります。

これを無視すると、エラーが発生します。

let div = document.createElement("div");
let p = document.querySelector("p");
p.insertBefore(div, p.firstChild); // これはエラーになる

このコードはエラーになります。

なぜなら、

p要素に子要素がないのにinsertBefore()を使用しているからです。

まとめ

JavaScriptのinsertBefore()メソッドはHTML要素を特定の位置に挿入するための便利なツールです。

ただし、どの要素に対してメソッドを呼び出すかには注意が必要です。

一歩ずつ新しい概念を理解し、自分のスキルを積み上げていきましょう。

コードは難しく感じるかもしれませんが、少しずつ学び続ければ必ず理解できます。

皆さんの学習と転職活動が成功することを心から応援しています。次回もお楽しみに。

レッツチャレンジ!