配列を HTML リストに変換する

はじめに

この実験では、JavaScript を使って配列を HTML リストに変換する方法を探ります。この実験の目的は、Array.prototype.map() と Document.querySelector() を使って HTML タグのリストを作成し、それを Web ページの既存のリストに追加する方法を理解することです。この実験が終わるとき、JavaScript を使って DOM を操作し、動的な HTML コンテンツを作成する方法をより深く理解しているでしょう。

配列を HTML リストに変換する

コーディングを始めるには、ターミナル/SSH を起動して node を入力します。

この関数は、与えられた配列要素を <li> タグに変換し、与えられた id のリストに追加します。

Array.prototype.map() と Document.querySelector() を使って HTML タグのリストを生成します。

const arrayToHTMLList = (arr, listID) =>
  (document.querySelector(`#${listID}`).innerHTML += arr
    .map((item) => `<li>${item}</li>`)
    .join(""));

使用例：

arrayToHTMLList(["item 1", "item 2"], "myListID");

まとめ

おめでとうございます！あなたは配列から HTML リストへの実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習することができます。