Terms Privacy

© Rollpie

JavaScript
16 Jan 2026

insertBefore で特定の位置に挿入する

insertBefore は、指定した要素の直前に新しい要素を挿入するメソッドです。appendChild が末尾に追加するのに対し、任意の位置に挿入できます。

基本的な使い方

parent.insertBefore(newNode, referenceNode) で、referenceNode の直前に newNode を挿入します。

<ul id="list">
  <li id="item1">項目1</li>
  <li id="item2">項目2</li>
  <li id="item3">項目3</li>
</ul>
const list = document.getElementById('list');
const item2 = document.getElementById('item2');

const newItem = document.createElement('li');
newItem.textContent = '新しい項目';

list.insertBefore(newItem, item2);
// 結果: 項目1 → 新しい項目 → 項目2 → 項目3

referenceNode が null の場合

参照ノードが null だと、末尾に追加されます。appendChild と同じ動作になります。

list.insertBefore(newItem, null); // 末尾に追加

先頭に追加する

最初の子要素を参照ノードにすれば、先頭に追加できます。

const list = document.getElementById('list');
const newItem = document.createElement('li');
newItem.textContent = '先頭に追加';

list.insertBefore(newItem, list.firstChild);

実際に動かしてみよう

HTML
CSS
JavaScript
<ul id="list">
  <li>項目1</li>
  <li id="target">項目2（この前に挿入）</li>
  <li>項目3</li>
</ul>
<button id="btn">項目を挿入</button>
#list li {
  padding: 4px;
}
.new {
  background: #ffeb3b;
}
let count = 0;
document.getElementById('btn').addEventListener('click', function() {
  count++;
  const newItem = document.createElement('li');
  newItem.textContent = '挿入された項目 ' + count;
  newItem.className = 'new';
  
  const list = document.getElementById('list');
  const target = document.getElementById('target');
  list.insertBefore(newItem, target);
});

insertBefore の注意点

親要素で呼ぶ

insertBefore は親要素のメソッドです。挿入したい要素自身ではなく、その親要素で呼び出します。

参照ノードは子要素

参照ノードは、その親要素の直接の子要素である必要があります。孫要素を指定するとエラーになります。

より新しい API：before と after

現代の JavaScript では、before や after メソッドも使えます。

const target = document.getElementById('target');

const newItem = document.createElement('li');
newItem.textContent = '新しい項目';

target.before(newItem);  // target の前に挿入
target.after(newItem);   // target の後ろに挿入

こちらのほうが直感的ですが、IE には対応していません。

7 views