insertBeforeメソッド

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

構文

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

例

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

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

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

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

parent.insertBefore(p, before);

コード実行結果：

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

例

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

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

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

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

parent.insertBefore(p, parent.firstElementChild);

コード実行結果：

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

例

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

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

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

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

parent.insertBefore(p, parent.firstChild);

コード実行結果：

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

insertBeforeメソッド

構文

例

例

例

関連項目