insertAdjacentHTMLを使ってHTMLを動的に追加・挿入

HTMLを動的に作成して追加・挿入したいという場面は結構あります。JavaScriptのinsertAdjacentHTMLメソッドを使えばそれが可能です。

例えばブログ記事の目次について、見出しタグを拾って動的に作成し、挿入するということができます。
あるいは、既存のシステムで元のソースコードを触れないため、後から加えるというケースもあるかもしれません。

でも、そんなにしょっちゅう使うものでもないので、記述方法を覚えておくのも大変です。この記事では、insertAdjacentHTMLの使い方をご紹介するとともに、記述方法を思い出したい場合にも活用しやすいようなページにしたいと思います。

insertAdjacentHTMLメソッドとは？

insertAdjacentHTMLメソッドはJavaScriptのメソッドで、特定の要素を起点にHTMLを挿入することができます。次のような記述をします。

const wrapper = ducument.getElementById('wrapper-01');
wrapper.insertAdjacentHTML(第一引数, 第ニ引数）;

この記述の場合だと、wrapperが起点となる要素となり、引数の役割は以下の通りです。

第一引数

起点となる要素に対してどの位置に挿入するかの指定

第二引数

追加する要素

第一引数による位置の指定方法

第一引数の位置の指定には以下の4つがあります。これが覚えられない・・。
なお、これらは'beforebegin'か"beforebegin"のように' 'か、" "でくくる必要があります。

beforebegin

第二引数で指定する起点となる要素の直前

afterbegin

第二引数で指定する起点となる要素の中の先頭

beforeend

第二引数で指定する起点となる要素の中の末尾

afterend

第二引数で指定する起点となる要素の直後

記述例

<div id="wrapper">
   <p id="sentence">この一文の後に一文を足します。</p>
</div>

このpタグの直後にpタグを1つ追加する記述例が以下となります。beforeendを利用する方法と、afterendを利用する方法があるので、それぞれご紹介します。

beforeendを利用する場合

beforeendを利用する場合は、指定要素の中の直前なので、指定要素は外枠のdiv要素となります。

const wrapper = document.getElementById('wrapper');
wrapper.insertAdjacentHTML('beforeend', '<p>この文を足します。</p>');

afterendを利用する場合

afterendを利用する場合は、指定要素の直後なので、指定要素はp要素となります。

const sentence = document.getElementById('sentence');
wrapper.insertAdjacentHTML('afterend', '<p>この文を足します。</p>');

結果

上記のJavaScriptの実行により、先ほどのHTMLが次のように書き変わります。

<div id="wrapper">
   <p　id="sentence">この一文の後に一文を足します。</p>
   <p>この文を足します。</p>
</div>

HTML要素を取得して順番を変えるとき

例えば次のHTMLの<p id="sentence">この文章の位置を移します。</p>を、<div id=”wrapper”></div>の後に移動するとします。

<div id="wrapper">
   <p id="sentence">この文章の位置を移します。</p>
   <p>文章</p>
</div>

その際、次のコードではエラーが発生します。insertAdjacentHTMLはHTML文字列を期待しており、移動する部分がHTML要素を含んでいるため、そのままinsertAdjacentHTMLで挿入しようとするとエラーが発生します。要素オブジェクトでは動作しません。

const wrapper = document.getElementById('wrapper');
const sentence = document.getElementById('sentence');
wrapper.insertAdjacentHTML('afterend', wrapper);

この場合、outerHTMLを利用して次のようにするとうまくいきます。

const wrapper = document.getElementById('wrapper');
const sentence = document.getElementById('sentence');
wrapper.insertAdjacentHTML('afterend', wrapper.outerHTML);

デモ

それでは、実際にinsertAdjacentHTMLメソッドを使った挙動を見ていただきます。
次のテキストエリアに何か文字を入力して、「追加」ボタンを押してみてください。下に表示されているリストの末尾に、新たに入力した文字がリストとして追加されます。

• これはデモのためのリストです。
• 追加ボタンを押すと、最後のリストの後に入力された文字がリストとして追加されます。

デモのコード

HTML

<textarea id="demo-textArea" rows="3" cols="30"></textarea>
<div class="btn-wrapper"><button id="demo-btn">追加<button></div>
<ul id="demo-ul" class="standard">
　　　<li>これはデモのためのリストです。</li>
　　　<li>追加ボタンを押すと、最後のリストの後に入力された文字がリストとして追加されます。</li>
</ul>

JavaScript

const btn = document.getElementById('demo-btn');
const ul = document.getElementById('demo-ul');
btn.addEventListener('click', function(){
   let text = document.getElementById('demo-textArea').value;
   ul.insertAdjacentHTML('beforeend', '<li>' + text + '</li>');
}, false);

insertAdjacentHTML利用上の注意事項

現在のJavaScriptはブラウザの進化もあり、かなり高速なのでパフォーマンスの観点では、それほどこのメソッドの利用を気にする必要はありません。ただ、動的にHTMLが挿入されるので、大幅にレイアウトが変わるような変更を施すと、視覚的にレイアウトの変更がわかる場合があります。

そうなると、UXの低下に繋がりますし、Googleのランキングの評価指標の一つであるコアウェブバイタルにおけるCLSの点数が低下します。

視覚的に、あるいは操作上大きく戸惑いを与えるような状態にならない限りは、SEOにおいても大きな影響はないと思われますが、無用な多用は避けた方が良いと言えます。

まとめ

HTMLを動的に挿入するためのinsertAdjacentHTMLについてご紹介しました。なかなか記述方法が覚えづらいので、このページが活用されれば幸いです。