【JavaScript】insertBefore()で指定する要素の前にHTML要素を挿入する!

(この記事は2023年01月07日に投稿されました。)

Javascriptで作成した新しいHTML要素を追加する方法としてinsertBefore()があります。

insertBefore()とは指定した親要素内にある子要素の先頭にHTML要素を挿入するメソッドであり、指定した子ノードの前に挿入されるようになります。

対象の子ノードの前に挿入されるため、存在しないノードを指定したり、子ノードを指定しないで使用するとエラーになってしまうので注意してください。

また、繰り返し処理やDOMツリーを使用することで一気に複数のHTML要素を追加することができます。

そのため、「このタイミングでこの場所にHTML要素を挿入したい」と思った場合はinsertBefore()を使用しましょう。

今回はJavaScriptのinsertBefore()で指定する要素の前にHTML要素を挿入する方法について紹介していきます。

この記事はこんな方におすすめ
・作成したHTML要素を指定した子要素の上に挿入したい場合
・既存のHTML要素を別の場所に移動させたい場合




insertBefore()とは

insertBefore()とは指定した要素内の先頭に子要素として挿入するメソッドになります。

指定したノード内にある子ノードの前に割り込む形で挿入されるようになります。

insertBefore()の書き方

insertBefore()の書き方は下記のようになります。

親ノードの後ろにinsertBefore()と追記し、括弧の中にパラメータを指定することで使用することができます。

insertBefore()のパラメータ

insertBefore()のパラメータは下記のようになります。

  1. 挿入するノード(必須):
    挿入したいノード(HTML要素)を指定する
  2. 子ノード(必須):
    「挿入するノード」を挿入するための子ノードを指定する

insertBefore()は必須パラメータとして、「挿入したいノード」と「子ノード」を指定します。

insertBefore()の返り値

insertBefore()の返り値は「挿入するHTML要素」となります。

insertBefore()で指定する要素の前にHTML要素を挿入するサンプルコード

insertBefore()で指定する要素の前にHTML要素を挿入するサンプルコードについてご紹介します。

ここでは、下記の3パターンでinsertBefore()を使用します。

  1. 挿入するノードが存在する場合
  2. 挿入するノードが存在しない場合
  3. 子ノードがnullである場合

挿入するノードが存在する場合

挿入するノードが存在する場合にinsertBefore()を使用します。

● index.html

● main.js

実行結果

存在する挿入するノードを指定してinsertbefore()を使用した結果

insertBefore()によって指定した要素内の先頭に子要素として挿入されています。

そのため、「既存要素」の上に「追加する新規要素」が表示されています。

挿入するノードが存在しない場合

挿入するノードが存在しない場合にinsertBefore()を使用します。

● index.html

● main.js

実行結果

存在しない挿入するノードを指定してinsertbefore()を使用した結果

挿入するノードが存在しないため、HTML要素を挿入することができません。

そのため、「追加する新規要素」が追加されることなく表示されています。

子ノードがnullである場合

子ノードnullである場合にinsertBefore()を使用します。

● index.html

● main.js

実行結果

子ノードがnullである場合にinsertbefore()を使用した結果

対象の子ノードがパラメータに設定されていないため、HTML要素を挿入することができません。

そのため、「追加する新規要素」は作成されていますが、追加されることなく表示されています。

insertBefore()で複数のHTML要素を一気に挿入する方法

insertBefore()でHTML要素を挿入しますが、ひとつずつではなく、一気にまとめて挿入したい時があるかと思います。

そのため、ここではinsertBefore()で複数のHTML要素を一気に挿入する方法を下記の2つでご紹介します。

  1. 繰り返し処理を使用する
  2. createDocumentFragment()を使用する

繰り返し処理を使用する

1つ目は繰り返し処理を使用する方法です。

繰り返し処理とは指定した内容を条件が一致する限り繰り返して行う処理となります。

そのため、繰り返し処理の中にinsertBefore()を使用することでHTML要素を一気にまとめて挿入することができるようになります。

そのため、ここでは繰り返し処理であるwhile文を使用して複数のHTML要素を一気に挿入します。

● index.html

● main.js

実行結果

while文とinsertBefore()を使用して複数のHTML要素を一気に挿入した結果

while文よってinsertBefore()の処理を繰り返し行い、複数の要素を一気に挿入しています。

そのため、「追加する新規要素」が5つ表示されています。

createDocumentFragment()を使用する

そして、2つ目はcreateDocumentFragment()を使用する方法です。

createDocumentFragment()とは、別のDOMツリー上を作成することができるメソッドになります。

createDocumentFragment()はブラウザによって表示されているDOMツリーとは切り離されたDOMツリーを作成します。

そのため、切り離されたDOMツリーに要素を追加し、DOMツリーを挿入することで、HTML要素を一気にまとめて追加することができるようになります。

● main.js

実行結果

createDocumentFragment()とinsertBefore()を使用して複数のHTML要素を一気に挿入した結果

createDocumentFragment()で作成した要素をinsertBefore()で追加することで、複数の要素を一気に挿入しています。

そのため、「追加する新規要素1」から「追加する新規要素5」が表示されています。

insertBefore()で既存のHTML要素を別の位置に移動する場合

insertBefore()は新しいHTML要素を追加するだけでなく、既存のHTML要素を別の位置に移動することもできます。

● index.html

● main.js

実行結果

insertBefore()で既存のHTML要素を別の位置に移動した結果

insertBefore()によって既存のHTML要素が別の位置に移動しています。

そのため、「divエリア1」にいた「divエリア1の既存要素」が「divエリア2」に移動して表示されています。

insertBefore()を使用する実際のケース

insertBefore()を使用する実際のケースについてご紹介します。

例えば、insertBefore()を使用して新しい内容が上に来るようなメモ機能を作成してみます。

● index.html

● main.js

実行結果

insertBefore()で新しい内容が上に来るようなメモ機能を作成した結果

最初のメモはappendChild()を使用してメモの内容を追加していますが、2つ目以降は新しいメモが上に来ないといけないため、insertBefore()で挿入しています。

そのため、メモの内容を入力して保存を押すと、新しい順にメモの内容が表示されています。

jQueryで指定する要素の前にHTML要素を挿入する場合

jQueryで指定する要素の前にHTML要素を挿入する場合は、prepend()を使用します。

prepend()とは、指定した要素の先頭にHTML要素を挿入するメソッドになります。

こちらはjQueryのメソッドであるため、jQueryファイルを呼び出す必要があります。

● index.html

● main.js

実行結果

jQueryのprepend()で指定する要素の前にHTML要素を挿入した結果

prepend()によって指定する要素の前にHTML要素を挿入しています。

そのため、「既存要素」の上に「追加する新規要素」が表示されています。

Sossy

jQueryのprepend()は「挿入するノード」だけ指定すれば良いので、insertBefore()と比べると書き方がとても簡単です。

HTML要素を追加するメソッドの一覧

JavaScriptではinsertBefore()以外にもHTML要素を指定した位置に追加するメソッドが存在します。

そのため、ここではHTML要素を指定した位置に追加するメソッドの一覧についてご紹介します。

appendChild()

appendChild()とは、指定した要素の子要素の末尾にHTML要素を追加するメソッドになります。

● index.html

● main.js

実行結果

appendChild()で指定した要素の子要素の末尾にHTML要素を追加した結果

appendChild()によって指定した要素の子要素の末尾にHTML要素が追加されています。

そのため、「追加する新規要素」が一番下に追加されて表示されています。

もし、appendChild()について詳しく知りたい場合は下記の記事をご参考ください。

before()

before()とは、指定した要素の前に別のHTML要素を挿入するメソッドになります。

● index.html

● main.js

実行結果

before()で指定した要素の前に別のHTML要素を挿入した結果

before()によって指定した要素の前に別のHTML要素が追加されています。

そのため、「追加する新規要素」が「divエリア」の上に表示されています。

after()

after()とは、指定した要素の後ろに別のHTML要素を挿入するメソッドになります。

● index.html

● main.js

実行結果

after()で指定した要素の後ろに別のHTML要素を挿入した結果

after()によって指定した要素の後ろに別のHTML要素が追加されています。

そのため、「追加する新規要素」が「divエリア」の下に表示されています。

insertAdjacentHTML()

insertAdjacentHTML()とは文字列を要素として挿入するメソッドとなります。

● index.html

● main.js

実行結果

insertAdjacentHTML()で指定した位置にHTML要素を追加した結果

insertAdjacentHTML()によって文字列がHTML要素として追加されています。

そのため「追加する新規要素A」が「既存要素」の下に、「追加する新規要素B」が「既存要素」の上に表示されています。

まとめ

⚫︎ insertBefore()とは指定した要素内の先頭に子要素として挿入するメソッドである

⚫︎ insertBefore()は下記のパラメータを指定して使用する
・挿入するノード(必須)
・子ノード(必須)

⚫︎ 挿入するノードが存在する場合にinsertBefore()を指定すると、指定した要素が子ノードの上に挿入される

⚫︎ 挿入するノードが存在しない場合にinsertBefore()を指定すると、要素の挿入が行われない

⚫︎ 子ノードがnullの場合にinsertBefore()を指定すると、要素の挿入が行われない

⚫︎ insertBefore()は既存のHTML要素を指定した場所に移動することができる

⚫︎ insertBefore()で複数の要素を一気に追加する方法として下記の2つがある
・繰り返し処理を使用する
・createDocumentFragment()を使用する

⚫︎ jQueryで指定した要素の先頭にHTML要素を追加するにはprepend()を使用する

⚫︎ HTML要素を指定した位置に追加するメソッドはinsertBefore()以外にも下記のようなメソッドがある
・appendChild()
(指定した親要素内の末尾に子要素として挿入するメソッド)
・before()
(指定した要素の前に別のHTML要素を挿入するメソッド)
・after()
(指定した要素の後ろに別のHTML要素を挿入するメソッド)
・insertAdjacentHTML()
(文字列を要素として挿入するメソッド)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です