JavaScript　insertBeforeの使い方：新規の要素を任意の箇所に挿入する方法

JavaScriptのinsertBeforeメソッドを使って新規の要素を任意の箇所に挿入する方法を解説します。また、既存の要素を移動する方法を解説します。

JavaScriptで要素を動的に追加する方法を調べているのですが、insertBeforeメソッドを使う方法があるようです。
使い方を教えてください！

insertBeforeメソッドは親要素の中に新規の要素を挿入するためのメソッドです。具体的には、親要素の子要素の中で指定した要素の前に新規の要素を挿入します。

insertBeforeメソッドの詳細な解説

要素を任意の箇所に挿入するには、insertBeforeメソッドを使用します。

以下のような書式で使用します。

parentNode.insertBefore(newNode, referenceNode);

parentNode: 挿入先の親要素
newNode: 挿入する新しい要素
referenceNode: 挿入する位置の基準となる既存の子要素

具体的な使い方としては、以下のようなコードとなります。

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
const referenceElement = document.getElementById('reference');

parent.insertBefore(newElement, referenceElement);

これによって、parent要素の中でreference要素の前にnewElement要素が追加されます。

以下のサンプルは、ボタンをクリックすると新しいリストアイテムを挿入するサンプルプログラムです。

<button id="add-button">Add new item</button>
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
const addButton = document.getElementById('add-button');
const list = document.getElementById('list');

addButton.addEventListener('click', () => {
  const newListItem = document.createElement('li');
  newListItem.textContent = 'New item';
  list.insertBefore(newListItem, list.children[1]);
});
</script>

このコードでは、”Add new item”というボタンをクリックすると、”Item 2″の前に”New item”という新しいリストアイテムが追加されます。

insertBeforeで既存の要素を移動する方法

　既存の要素を移動する方法には、まず要素を取得し、次に要素を挿入する位置を取得する必要があります。insertBeforeメソッドを使用することで、要素を移動することができます。

例えば、以下のようにul要素の2番目の子要素を1番目の子要素の前に移動する場合を考えます。

<ul>
  <li>apple</li>
  <li>orange</li>
  <li>grape</li>
</ul>

const ul = document.querySelector('ul');
const li = ul.getElementsByTagName('li')[1];
const firstChild = ul.firstChild;
ul.insertBefore(li, firstChild);

　まずは、移動する要素（2番目の子要素）を取得します。以下のように、getElementsByTagNameメソッドを使用してli要素を取得し、itemメソッドを使用して2番目の子要素を取得します。

　次に、挿入する位置（1番目の子要素の前）を取得します。以下のように、firstChildプロパティを使用してul要素の最初の子要素（1番目の子要素）を取得します。

　最後に、insertBeforeメソッドを使用して要素を移動します。以下のように、insertBeforeメソッドを使用して、li要素をfirstChildの前に挿入します。

このようにすることで、ul要素の子要素の順番がapple, orange, grapeから、orange, apple, grapeに変更されます。

以下に、上記の例をサンプルプログラムで実装したものを記載します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>既存の要素を移動する方法</title>
</head>
<body>
  <ul>
    <li>apple</li>
    <li>orange</li>
    <li>grape</li>
  </ul>
  <script>
    const ul = document.querySelector('ul');
    const li = ul.getElementsByTagName('li')[1];
    const firstChild = ul.firstChild;
    ul.insertBefore(li, firstChild);
  </script>
</body>
</html>

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

この記事のまとめ

insertBeforeメソッドを使って新規の要素を任意の箇所に挿入する方法を解説しました。
また、既存の要素を移動する方法を解説しました。

insertBeforeメソッドを使って新規の要素を任意の箇所に挿入する方法のまとめ

insertBeforeメソッドは、親要素の中で指定した位置の前に新しい要素を挿入するメソッド
parentNode.insertBefore(newNode, referenceNode)の形式で使用する
[parentNode: 挿入先の親要素、newNode: 挿入する新しい要素、referenceNode:挿入する位置の基準となる既存の子要素を指定する]
指定した位置に新しい要素が追加される

insertBeforeメソッドを使って既存の要素を移動する方法のまとめ

既存の要素を移動するには、要素を取得し、挿入する位置を取得して、insertBeforeメソッドを使用する。
要素を取得するには、querySelectorやgetElementsByTagNameメソッドを使用する。
挿入する位置を取得するには、目的の要素の前に位置する要素を取得する。
insertBeforeメソッドの第一引数に移動させたい要素、第二引数に挿入する位置の要素を指定する。

なるほど、insertBeforeメソッドを使えば動的に要素を挿入できるんですね。これで問題なく動的なページを作成できそうです。ありがとうございます！

要素を動的に追加する場合には、insertBeforeメソッドが便利です。挿入する位置の基準となる既存の子要素を正確に指定することが重要です。
また、新しい要素を作成する際には、document.createElement()メソッドを使用すると便利です。動的な要素の追加を行う際には、HTMLコードに頼らずにJavaScriptで動的に追加することが重要です。