Array in HTML-Liste umwandeln

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.