ちょっとディープな生物の世界

【JavaScript】insertAdjacentHTMLメソッドとは?

HTMLを挿入するメソッド

ElementオブジェクトのtextContentプロパティでは、テキストを書き換えることしかできずHTMLタグを挿入することはできません。HTMLタグを挿入する場合にはinsertAdjacentHTMLメソッドを使います。

取得した要素.insertAdjacentHTML('挿入する場所','挿入する要素');

ちなみにtextContentメソッドは次のように使います。微妙に違いますね。

取得した要素.textContent = "文字列";
取得した要素.textContent = 変数等;

挿入する場所の種類

挿入できる場所にはいくつか種類があります。

beforebegin取得した要素の開始タグの前に挿入
afterbegin取得した要素の開始タグのすぐ後に挿入
beforeend取得した要素の終了タグのすぐ前に挿入
afterend取得した要素の終了タグのすぐ後に挿入

今回、次のようなコードを書きました。食べ物一覧を一番上にもってきたいので、挿入する場所はbeforeendとしています。

     //beforebegin
<ul id = foodsList>
     //afterbegin  
  <li>食べ物一覧</li>
     //beforeend  
</ul>
     //afterend
const foods=["オレンジ","パパイヤ","メロン"];
for(let item of foods){
  const li =`<li>${item}</i>`;
  document.getElementById(`foodsList`).insertAdjacentHTML('beforeend',li);
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です