はじめに
この実験では、JavaScriptを使って配列をHTMLリストに変換する方法を探ります。この実験の目的は、Array.prototype.map()
と Document.querySelector()
を使ってHTMLタグのリストを作成し、それをWebページの既存のリストに追加する方法を理解することです。この実験が終わるとき、JavaScriptを使ってDOMを操作し、動的な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コンテンツを作成する方法をより深く理解しているでしょう。
コーディングを始めるには、ターミナル/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でさらに多くの実験を行って練習することができます。