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 → 項目3referenceNode が 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 には対応していません。
12views
