JavaScript

insertBefore()の使い方とデモ【JavaScript】

この記事では、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で要素の追加」で解説しています。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5