Convertir un tableau en liste HTML

Introduction

Dans ce laboratoire, nous allons explorer comment convertir un tableau en une liste HTML à l'aide de JavaScript. Le but de ce laboratoire est de vous aider à comprendre comment utiliser Array.prototype.map() et Document.querySelector() pour créer une liste d'éléments HTML et les ajouter à une liste existante dans votre page web. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de manipuler le DOM à l'aide de JavaScript et de créer un contenu HTML dynamique.

Conversion d'un tableau en liste HTML

Pour commencer à coder, lancez le Terminal/SSH et entrez node.

Cette fonction convertit les éléments de tableau donnés en balises <li> et les ajoute à la liste avec l'ID donné.

Utilisez Array.prototype.map() et Document.querySelector() pour générer une liste d'éléments HTML.

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

Utilisation de l'exemple :

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

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur la conversion d'un tableau en liste HTML. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.