Einführung
In diesem Lab werden wir untersuchen, wie man mithilfe von JavaScript ein Array in eine HTML-Liste umwandeln kann. Ziel dieses Labs ist es, Ihnen zu helfen, zu verstehen, wie man Array.prototype.map() und Document.querySelector() verwendet, um eine Liste von HTML-Tags zu erstellen und diese an eine vorhandene Liste in Ihrer Webseite anzuhängen. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie man mit JavaScript den DOM manipuliert und dynamischen HTML-Inhalt erstellt.
Umwandeln eines Arrays in eine HTML-Liste
Um zu beginnen, öffnen Sie das Terminal/SSH und geben Sie node ein.
Diese Funktion wandelt die gegebenen Array-Elemente in <li>-Tags um und fügt sie zur Liste mit der gegebenen ID hinzu.
Verwenden Sie Array.prototype.map() und Document.querySelector(), um eine Liste von HTML-Tags zu generieren.
const arrayToHTMLList = (arr, listID) =>
(document.querySelector(`#${listID}`).innerHTML += arr
.map((item) => `<li>${item}</li>`)
.join(""));
Beispielverwendung:
arrayToHTMLList(["item 1", "item 2"], "myListID");
Zusammenfassung
Herzlichen Glückwunsch! Sie haben das Array in HTML-Liste Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.