指定した位置にHTML要素を挿入する

HTML要素を指定した位置に挿入

ページの指定した位置にHTML要素を挿入するときは、次の4種類のメソッドを使用することができます。

以降は以下のHTMLコードに対して、それぞれのメソッドを使って新しいHTML要素を挿入する方法を解説していきます。

index.html

<div id="textbox">
	<p id="p1" class="text_cat">テキスト1</p>
	<p id="p2" class="text_cat">テキスト2</p>
	<p id="p3" class="text_cat">テキスト3</p>
</div>

なお、HTML要素を新しく作成する方法について詳しくは別記事「新しいHTML要素を作成する」を参照してください。

指定したHTML要素の中の末尾に挿入する

appendChildメソッドを使うと、指定したHTML要素の中の一番最後にパラメータで渡したHTML要素を挿入することができます。

以下の例では、id属性「textbox」のHTML要素を取得して、その要素内の末尾に新しく作成したHTML要素を挿入します。

index.js

// id属性で要素を取得
let textbox_element = document.getElementById('textbox');

// 新しいHTML要素を作成
let new_element = document.createElement('p');
new_element.textContent = '追加テキスト';

// 指定した要素の中の末尾に挿入
textbox_element.appendChild(new_element);

このコードを実行したあとのHTMLは以下のようになります。

index.html

<div id="textbox">
	<p id="p1" class="text_cat">テキスト1</p>
	<p id="p2" class="text_cat">テキスト2</p>
	<p id="p3" class="text_cat">テキスト3</p>
	<p>追加テキスト</p>
</div>

指定したHTML要素の前後に挿入する

指定したHTML要素の直前に挿入する場合はbeforeメソッド、直後に挿入する場合はafterメソッドを使います。
この2つのメソッドは隣り合う前後の位置に新しいHTML要素を挿入します。

以下の例では、id属性に「p2」を持つHTML要素を取得して、その要素の前後に新しく作成したHTML要素を挿入します。

index.js

// id属性で要素を取得
let p2_element = document.getElementById('p2');

// 新しいHTML要素を作成
let new_element1 = document.createElement('p');
new_element1.textContent = '追加テキスト その1';

let new_element2 = document.createElement('p');
new_element2.textContent = '追加テキスト その2';

// 指定した要素の前に挿入
p2_element.before(new_element1);

// 指定した要素の後に挿入
p2_element.after(new_element2);

このコードを実行したあとのHTMLは以下のようになります。

index.html

<div id="textbox">
	<p id="p1" class="text_cat">テキスト1</p>
	<p>追加テキスト その1</p>
	<p id="p2" class="text_cat">テキスト2</p>
	<p>追加テキスト その2</p>
	<p id="p3" class="text_cat">テキスト3</p>
</div>

指定したHTML要素の中にある子要素の前に挿入する

insertBeforeメソッドは指定したHTML要素の中にある子要素を指定して、その子要素の直前にHTML要素を挿入します。
第1パラメータに挿入するHTML要素、第2パラメータに子要素を指定します。

以下の例では、id属性に「textbox」を持つHTML要素を取得して、id属性「p1」の要素の前に新しいHTML要素を挿入します。

index.js

// id属性で要素を取得
let textbox_element = document.getElementById('textbox');
let p1_element = document.getElementById('p1');

// 新しいHTML要素を作成
let new_element = document.createElement('p');
new_element.textContent = '追加テキスト';

textbox_element.insertBefore( new_element, p1_element);

このコードを実行したあとのHTMLは以下のようになります。

index.html

<div id="textbox">
	<p>追加テキスト</p>
	<p id="p1" class="text_cat">テキスト1</p>
	<p id="p2" class="text_cat">テキスト2</p>
	<p id="p3" class="text_cat">テキスト3</p>
</div>

insertBeforeメソッドはありますが、対になるinsertAfterメソッドはありません。
もし指定した要素の前でなく後に挿入したいときは、insertBeforeメソッドの第2パラメータでnextElementSiblingプロパティを使うことで実現することができます。

index.js

// id属性で要素を取得
let textbox_element = document.getElementById('textbox');
let p1_element = document.getElementById('p1');

// 新しいHTML要素を作成
let new_element = document.createElement('p');
new_element.textContent = '追加テキスト';

textbox_element.insertBefore( new_element, p1_element.nextElementSibling);

このコードを実行するとHTMLは以下のようになります。

index.html

<div id="textbox">
	<p id="p1" class="text_cat">テキスト1</p>
	<p>追加テキスト</p>
	<p id="p2" class="text_cat">テキスト2</p>
	<p id="p3" class="text_cat">テキスト3</p>
</div>

さらに、nextElementSiblingプロパティを2つ以上続けて使うことで「2つ以上後ろに挿入」のようなことも可能です。
以下の例ではnextElementSiblingプロパティを3つ繋げることで、2つ隣りの要素の後ろに新しいHTML要素を挿入します。

index.js

// id属性で要素を取得
let textbox_element = document.getElementById('textbox');
let p1_element = document.getElementById('p1');

// 新しいHTML要素を作成
let new_element = document.createElement('p');
new_element.textContent = '追加テキスト';

textbox_element.insertBefore( new_element, p1_element.nextElementSibling.nextElementSibling.nextElementSibling);

このコードを実行するとHTMLは以下のようになります。

index.html

<div id="textbox">
	<p id="p1" class="text_cat">テキスト1</p>
	<p id="p2" class="text_cat">テキスト2</p>
	<p id="p3" class="text_cat">テキスト3</p>
	<p>追加テキスト</p>
</div>

要素の後ろではなく前に挿入したいときは、previousElementSiblingプロパティを使うことで2つ隣りの要素の前にHTML要素を挿入するようなことができます。