この記事では、生成したHTMLの要素をブラウザに表示させるためのメソッドの
appendChildとinsertBeforeの違いについて解説します。

この記事でわかること

appendChildとinsertBeforeの違い
appendChildの使い方
insertBeforeの使い方

appendChildとinsertBeforeの違い

①appendChildと②insertBeforeは、どちらも
生成したHTML要素をブラウザに表示させるためのメソッドです。
さらに、特定の親要素の中に子要素を追加してくれます。
違いはずばり、追加される場所です！

①appendChild

追加される場所は、親要素の末尾です。
つまり指定した要素の閉じタグの直前ですね。

②insertBefore

追加される場所は、第2引数で指定した要素の前です。
なので、必ず第2引数を指定してあげる必要がありますよ〜〜

親要素`parent`の中に、子要素`child`を追加する方法で解説します！

<div class='parent'>
  <div class='child'></div><!--既存の要素-->
  <div class='child'></div><!--既存の要素-->
</div>

appendChildの使い方

書き方：親要素.appendChild(子要素)

既存の<div class='parent'></div>に、<div class='child'></div>を子要素として追加したい場合

//親となるdiv要素をとってくる
const parent = document.getElementByClassName('parent');

//追加する要素の作成
const child = document.createElement('div');
child.setAttribute('class', "child");

// 生成したHTMLの要素をブラウザに表示させる
parent.appendChild(child);

これが実行されると、以下のように要素が追加されます。

<div class='parent'>
  <div class='child'></div><!--既存の要素-->
  <div class='child'></div><!--既存の要素-->
  <div class='child'></div><!--追加された要素-->
</div>

insertBeforeの使い方

書き方：親要素.insertBefore(追加する要素, どこに追加するのか)

例

//親となるdiv要素をとってくる
const parent = document.getElementByClassName('parent');

//追加する要素の作成
const child = document.createElement('div');
child.setAttribute('class', "child");

// 生成したHTMLの要素をブラウザに表示させる
parent.insertBefore(child, parent.firstElementChild);

これが実行されると、以下のように要素が追加されます。

<div class='parent'>
  <div class='child'></div><!--追加された要素-->
  <div class='child'></div><!--既存の要素-->
  <div class='child'></div><!--既存の要素-->
</div>

これで、親要素の中の最初の位置に持ってくることができました。

生成したHTMLの要素をブラウザに表示させる記述ですが、childの前に入れてあげたらいいじゃない？と思う方もいらっしゃるかもしれません。でもこの場合、childがたくさんあるのでどのchildか判断できないんですよね。
なので、parent.firstElementChildと記述してあげることで、親要素の中身の一番最初に表示させることができます。
firstElementChildは、JavaScriptのElementオブジェクトの最初の子要素を取得するプロパティです。

おわりに

appendChildとinsertBeforeの違いはわかりましたか？
もしわからないことや間違いなどがあれば、コメントでお知らせください🙇‍♀️

【JavaScript】appendChildとinsertBeforeの違い