JavaScript: insertBefore() 要素を手前に追加する

要素を手前に追加したい場合は inserBefore() メソッドを使用します。

必要になる要素は、追加要素、親要素、指定要素の3つです。 指定要素の手前に追加要素を追加します。

書式

親要素.insertBefor(追加要素, 指定要素)

コード例

まず次のようなli要素が2つあるul要素を用意します。ul要素の id="list" です。


<ul id="list">
    <li>リスト1</li>
    <li>リスト2</li>
</ul>

上のリストのli要素を1つ増やして、下のようなリストを作ります。 先頭に新しい li 要素を追加します。


<ul id="list">
    <li>リスト3</li>
    <li>リスト1</li>
    <li>リスト2</li>
    
</ul>

JavaScriptコード


// 親要素
var list = document.getElementById('list');

// 追加要素
var li = document.createElement('li');
li.innerHTML = 'リスト3';

// 追加  list.children[0]の手前
list.insertBefore(li, list.children[0]);

まず親要素を取得し、次に追加要素を作成します。最後に作成した要素を追加します。

指定要素として、「list.children[0]」を指定しています。 これによりリストの先頭に新しい要素が追加されます。

先頭ではなく、「リスト1」と「リスト2」の間に追加したい場合は「list.children[1]」を指定します。

JavaScript入門