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 には対応していません。
