JavaScriptで要素を挿入する

JavaScriptのinsertAdjacentHTML()とinsertAdjacentElement()を使って、DOMツリー内の指定位置への要素の挿入を試してみます。

insertAdjacentHTML()

まずはinsertAdjacentHTML()です。
#sampleに対して挿入を行います。

<div id="sample">
	<p>#sample内部1つ目の要素です。</p>
	<p>#sample内部2つ目の要素です。</p>
</div>

insertAdjacentHTML()は4つの挿入位置の指定ができるので、それぞれ試してみます。

var sample = document.getElementById('sample');

// beforebegin: 要素の直前に挿入
sample.insertAdjacentHTML('beforebegin', '<p>beforebegin</p>');
// afterbegin: 要素内部の先頭に挿入
sample.insertAdjacentHTML('afterbegin', '<p>afterbegin</p>');
// beforeend: 要素内部の末尾に挿入
sample.insertAdjacentHTML('beforeend', '<p>beforeend</p>');
// afterend: 要素の直後に挿入
sample.insertAdjacentHTML('afterend', '<p>afterend</p>');

デベロッパーツールで確認すると、以下のように挿入されました。

<p>beforebegin</p>
<div id="sample">
	<p>afterbegin</p>
	<p>#sample内部1つ目の要素です。</p>
	<p>#sample内部2つ目の要素です。</p>
	<p>beforeend</p>
</div>
<p>afterend</p>

insertAdjacentHTML()のデモページ

insertAdjacentHTML()の指定方法は以下の通りです。

insertAdjacentElement()

次にinsertAdjacentElement()を試してみます。
基本的にはinsertAdjacentHTML()と同じような使い方になります。

var sample = document.getElementById('sample');

// 挿入する要素を生成
var test01 = document.createElement('p');
test01.textContent = 'beforebegin';
// beforebegin: 要素の直前に挿入
sample.insertAdjacentElement('beforebegin', test01);

// 挿入する要素を生成
var test02 = document.createElement('p');
test02.textContent = 'afterbegin';
// afterbegin: 要素内部の先頭に挿入
sample.insertAdjacentElement('afterbegin', test02);

// 挿入する要素を生成
var test03 = document.createElement('p');
test03.textContent = 'beforeend';
// beforeend: 要素内部の末尾に挿入
sample.insertAdjacentElement('beforeend', test03);

// 挿入する要素を生成
var test04 = document.createElement('p');
test04.textContent = 'afterend';
// afterend: 要素の直後に挿入
sample.insertAdjacentElement('afterend', test04);

insertAdjacentHTML()との違いは、insertAdjacentHTML()は第二引数のテキストをパースして使用するのに対して、insertAdjacentElement()はHTML要素を事前に生成して、第二引数に指定する形になります。

挿入後の結果はinsertAdjacentHTML()と同じになりました。

<p>beforebegin</p>
<div id="sample">
	<p>afterbegin</p>
	<p>#sample内部1つ目の要素です。</p>
	<p>#sample内部2つ目の要素です。</p>
	<p>beforeend</p>
</div>
<p>afterend</p>

insertAdjacentElement()のデモページ

insertAdjacentElement()の指定方法は以下の通りです。