この記事では、JavaScriptで、特定の要素の直前に追加するinsertBefore()の使い方を解説します。
insertBefore()を使った簡単なデモも紹介します。
insertBefore()の使い方
insertBefore()はノードを参照ノードの前に、指定された親ノードの子として挿入します。
insertBefore()は下記のように使います。
親要素.insertBefore(追加したい要素, 追加したい場所)
「追加したい場所」の直前に「追加したい要素」が追加されます。
【デモ】insertBefore()を使って要素を追加する
insertBefore()を使って、簡単にデモを実際に使ってみましょう。
今回のサンプルでは、「createElement()を使って要素を生成し、insertBefore()を使って追加する」というものです。
デモ
「追加」ボタンをクリックするとイベントが発火します。
サンプルコード
下記のサンプルコードでは、#child2の前にdiv要素（createElementで生成）を追加しています。
function createArea () {
var area = document.createElement('div');
area.id = 'blue';
area.innerHTML = '追加された要素です。';
var parent = document.getElementById('parent');
var child2 = document.getElementById('child2');
parent.insertBefore(area, child2);
}<input type="button" value="追加" onclick="createArea()">
<div id="parent">
<p id="child1">child1です。</p>
<p id="child2">child2です。</p>
</div>#parent {
background-color: #eee;
padding: 10px;
}
#child1 {
background-color: yellow;
padding: 10px;
}
#child2 {
background-color: green;
padding: 10px;
}
#blue {
background-color: blue;
padding: 10px;
color: #fff;
}createElement()について詳しくは「createElement()の使い方・デモ【JavaScript】」にて解説しております。
【補足】末尾に要素を追加するには引数にnull
insertBeoforeは「特定の要素の直前に追加」しますが、
親要素.insertBefore(追加したい要素, null)
とすることで、親要素の末尾に追加することができます。
function createArea () {
var area = document.createElement('div');
area.id = 'blue';
area.innerHTML = '追加された要素です。';
var parent = document.getElementById('parent');
var child1 = document.getElementById('child1');
parent.insertBefore(area, null);
}insertBefore(area, null)とすると、末尾に追加がされます。
insertBefore()での末尾への追加と似た働きをするのは「appendChild()」です。
appendChildについては「appendChildで要素の追加」で解説しています。
