HTMLを挿入するメソッド
ElementオブジェクトのtextContentプロパティでは、テキストを書き換えることしかできずHTMLタグを挿入することはできません。HTMLタグを挿入する場合にはinsertAdjacentHTMLメソッドを使います。
取得した要素.insertAdjacentHTML('挿入する場所','挿入する要素');ちなみにtextContentメソッドは次のように使います。微妙に違いますね。
取得した要素.textContent = "文字列";
取得した要素.textContent = 変数等;挿入する場所の種類
挿入できる場所にはいくつか種類があります。
| beforebegin | 取得した要素の開始タグの前に挿入 |
| afterbegin | 取得した要素の開始タグのすぐ後に挿入 |
| beforeend | 取得した要素の終了タグのすぐ前に挿入 |
| afterend | 取得した要素の終了タグのすぐ後に挿入 |
今回、次のようなコードを書きました。食べ物一覧を一番上にもってきたいので、挿入する場所はbeforeendとしています。
//beforebegin
<ul id = foodsList>
//afterbegin
<li>食べ物一覧</li>
//beforeend
</ul>
//afterendconst foods=["オレンジ","パパイヤ","メロン"];
for(let item of foods){
const li =`<li>${item}</i>`;
document.getElementById(`foodsList`).insertAdjacentHTML('beforeend',li);
}