Comment créer une liste HTML à partir d'un tableau JavaScript ?-js tutoriel-php.cn

Comment créer une liste HTML à partir d'un tableau JavaScript ?

WBOY

Libérer： 2023-08-24 22:29:02

avant

1137 Les gens l'ont consulté

如何从 JavaScript 数组创建 HTML 列表？

Dans ce tutoriel, nous verrons différentes manières de créer des listes HTML à partir de tableaux JavaScript. Si nous parlons de simples listes HTML, alors nous créons toutes les listes manuellement en utilisant ul (liste non ordonnée) et dans la balise li em> (liste).

Considérez une situation dans laquelle vous aurez n éléments et devrez les imprimer dans une liste, alors écrire tous les éléments sera une tâche très chargée. projeter et imprimer manuellement, n'est-ce pas ? Cela peut ensuite être facilement réalisé à l’aide des méthodes d’itération JavaScript.

Examinons les différentes façons de créer des listes HTML en JavaScript.

Utilisez la boucle for
Utilisez la boucle for avec des fragments
Utilisez la boucle forEach()

Utilisez la boucle for

L'idée est d'itérer en utilisant un simple for tableau de boucles Tout éléments présents dans la liste Il s'agit d'une méthode JavaScript normale par défaut pour itérer puis ajouter les éléments de la liste aux éléments ul (liste non ordonnée) en créant une li (liste) à l'aide de la méthode createElemnt appendChild.

Exemple

<html>
<body>
   <h3> HTML list using JavaScript using for loop</h3>
   <ul id="UnList"></ul>
   <script>
      let data = ["item1", "item2", "item3", "item4"];
      let list = document.getElementById("UnList");
      for (i = 0; i < data.length; ++i) {
         var li = document.createElement(&#39;li&#39;);
         li.innerText = data[i];
         list.appendChild(li);
      }
   </script>
</body>
</html>

Copier après la connexion

Utilisation d'une boucle for avec des fragments

C'est la même chose que la première méthode décrite ci-dessus, mais la différence est que nous utiliserons

Fragment pour insérer. Le fragment a tendance à le garder séparé, ce qui signifie qu'il n'est pas attaché à l'arborescence DOM, donc il n'est pas attaché au vrai DOM, le navigateur doit alors faire moins de travail. Dans la méthode ci-dessus, sans fragments, le navigateur effectue beaucoup de travail derrière l'écran, ce qui affecte les performances réelles, et ne s'affiche pas réellement dans la page réelle. Il est donc préférable d’utiliser des fragments.

Pour utiliser des fragments, nous ajouterons d'abord l'élément de liste au fragment, puis ajouterons le fragment à la liste, plutôt que de l'insérer directement dans l'élément de liste sans le fragment.

Exemple

<!DOCTYPE html>
<html>
<body>
   <h3>HTML list using JavaScript with fragment</h3>
   <ul id="UnList"></ul>
   <script>
      let data = ["item1", "item2", "item3", "item4"];
      let list = document.getElementById("UnList");
      var fragList = document.createDocumentFragment();
      for (i = 0; i < data.length; ++i) {
         var li = document.createElement(&#39;li&#39;);
         li.textContent = data[i];
         fragList.appendChild(li);
      }
      list.appendChild(fragList);
   </script>
</body>
</html>

Copier après la connexion

Utilisation de la méthode forEach()

forEach() est une méthode de tableau en JavaScript qui appelle une fonction donnée une fois pour chaque élément de l'élément, en gros, elle exécute une fonction personnalisée Une fonction de rappel pour chaque élément présent dans la liste du tableau, qui fonctionne de la même manière qu'une boucle for.

Exemple

<!DOCTYPE html>
<html>
<body>
   <h3>HTML list using JavaScript forEach()</h3>
   <ul id="UnList"></ul>
   <script>
      let data = ["item1", "item2", "item3", "item4"];
      let list = document.getElementById("UnList");
      var fragList = document.createDocumentFragment();
      data.forEach(function (item) {
         var li = document.createElement(&#39;li&#39;);
         li.textContent = item;
         fragList.appendChild(li);
      });
      list.appendChild(fragList);
   </script>
</body>
</html>

Copier après la connexion

Donc, nous avons vu toutes les façons de créer une liste html directement en utilisant JavaScript, j'espère que cela vous plaira.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!