insertBeforeメソッド

insertBeforeメソッドは、 ある要素の前に別の要素を挿入することができます。 最も一般的な使用法は、 createElementで要素を作成した後です。 このメソッドは、挿入が行われる要素の親に対して適用します。

構文

javascript親要素.insertBefore(挿入する要素, どこの前に挿入するか);

例

段落を作成し、2番目の段落の前に配置しましょう：

html<div id="parent">
  <p>要素 1</p>
  <p id="before">要素 2</p>
  <p>要素 3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

コード実行結果：

html<div id="parent">
  <p>要素 1</p>
  <p>!</p>
  <p id="before">要素 2</p>
  <p>要素 3</p>
</div>

例

要素#parentの先頭に段落を追加しましょう。 これを行うには、段落を#parentの最初の子の前に挿入します。 この子はfirstElementChildを使用して見つけることができます：

html<div id="parent">
  <p>要素 1</p>
  <p>要素 2</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

コード実行結果：

html<div id="parent">
  <p>!</p>
  <p>要素 1</p>
  <p>要素 2</p>
</div>

例

第2引数としてnullを渡すと、 insertBeforeメソッドはappendChildのように動作します。 同時に、要素に子要素がない場合、 firstElementChildはnullを返します。 したがって、子要素がない場合でも要素の先頭に追加することができます：

html<div id="parent"></div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

コード実行結果：

html<div id="parent">
  <p>!</p>
</div>

関連項目