【JavaScript】HTML文字列を挿入・置き換えをする方法

insertAdjacentHTMLは、第二引数で指定するテキストをHTMLとして、指定された位置（第一引数で指定）に挿入します。

構文は以下です。

.insertAdjacentHTML(position, text);

・第二引数で指定するテキストを HTMLとして、第一引数に指定した位置に挿入。
・adjacentの読みは、「アジェイスン」みたいに言うようです。

‘beforebegin‘ elementの直前に挿入
‘‘afterbegin‘ element 内部の、最初の子要素の前に挿入
‘beforeend‘ element 内部の、最後の子要素の後に挿入
‘afterend‘ element の直後に挿入

<div id="box">
    <h1>Title</h1>
</div>

const box = document.getElementById('box');
box.insertAdjacentHTML('beforeend', '<p>挿入てきすと</p>');

結果：

<div id="box">
    <h1>Title</h1>
    <p>挿入てきすと</p>
</div>

innerHTMLは、要素の内容を指定した文字列で置き換える。

構文は以下です。

innerHTML='';

・文字通り”置き換え”するので、子要素がある場合も全て消しさってから追加されるイメージです。
・''; の値を空にすると、対象の中身を空にします。（便利です）。

<h1 id="title">タイトル</h1>

const target= document.getElementById('title');
target.innerHTML ='置き換えテキスト';

結果：

<h1 id="title">置き換えテキスト</h1>

・insertAdjacentHTMLは、innerHTMLよりも処理が速いようです。
・innerHTMLと似たプロパティとして、textContent()が、ありますが、こちらはHTMLとして解釈せず、「文字列」として解釈します。

・参考にさせていただいた記事
developer.mozilla.org
developer.mozilla.org

kaibukuroのブログ