Javascript ターゲットを指定し、要素を追加する方法５選

例えばH1要素の前後に新たに要素を追加したい、ご希望に叶う５つの方法があります。

初めにターゲットを取得します。

const target = document.querySelector('h1');

1) insertAdjacentHTML / insertAdjacentElement / insertAdjacentText

最も手軽で強力な方法です。位置を指定するだけで追加できます。挿入位置をイメージしやすいおすすめの方法です。

• insertAdjacentHTML(position,text)はHTMLコードを追加できます。
• insertAdjacentElement(position,element)はHTML要素を追加できます。
• insertAdjacentText(position,text)はテキストを追加できます。

前に追加

target.insertAdjacentHTML('beforebegin', '<div>前に追加</div>');

後ろに追加

target.insertAdjacentHTML('afterend', '<div>後ろに追加</div>');

positionは4種類

<!-- beforebegin -->
<h1>
  <!-- afterbegin -->
  テキスト
  <!-- beforeend -->
</h1>
<!-- afterend -->

2) parentNode.insertBefore()

ターゲットの親が必須の要素を追加する操作です。特に後ろに追加するパターンはカオスになりがち。

前に追加

const div = document.createElement('div');
div.textContent = '前に追加';
target.parentNode.insertBefore(div, target );

後ろに追加

const div = document.createElement('div');
div.textContent = '後ろに追加';
target.parentNode.insertBefore(div, target.nextSibling );

3) before / after

モダンでシンプルです。HTMLコードを直接設定できません。

前に追加

target.before('前に追加');

const div = document.createElement('div');
div.textContent = '前に追加';
target.before( div );

後ろに追加

target.after('後ろに追加');

const div = document.createElement('div');
div.textContent = '後ろに追加';
target.after( div );

4) outerHTML

元のH1をdelete、新たに作り直すため、イベントリスナーは消失します。

target.outerHTML = '<div>前に追加</div>' + target.outerHTML + '<div>後ろに追加</div>';

5) parentNode.replaceChild

元ノードを複製し、新しい構造に包み込みます。

const clone = target.cloneNode(true);
const wrapper = document.createElement('div');
wrapper.innerHTML ='<div>前に追加</div>';
wrapper.appendChild(clone);
wrapper.insertAdjacentHTML('beforeend', '<div>後ろに追加</div>');
target.parentNode.replaceChild(wrapper, target );

まとめ：insertAdjacentシリーズの使い勝手がいい

ここに要素を追加したい場面では、ターゲットを決めて挿入できるinsertAdjacentHTML関数がとても便利ですね。Adjacentは隣接という意味です。