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

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、ここをクリックしてください

はじめに

この実験では、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でさらに多くの実験を行って練習することができます。