Wie erstelle ich eine HTML-Liste aus einem JavaScript-Array?-js-Tutorial-php.cn

Wie erstelle ich eine HTML-Liste aus einem JavaScript-Array?

WBOY

Freigeben： 2023-08-24 22:29:02

nach vorne

1150 Leute haben es durchsucht

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

In diesem Tutorial sehen wir verschiedene Möglichkeiten, HTML-Listen aus JavaScript-Arrays zu erstellen. Wenn wir über einfache HTML-Listen sprechen, erstellen wir alle Listen manuell mit ul (ungeordnete Liste) und im li em> (Listen)-Tag.

Stellen Sie sich eine Situation vor, in der Sie n Elemente haben und diese in einer Liste ausdrucken müssen, dann wird das Schreiben aller Elemente eine sehr arbeitsintensive Aufgabe sein. Manuell projizieren und drucken, oder? Dies kann dann einfach mithilfe von JavaScript-Iterationsmethoden erfolgen.

Sehen wir uns die verschiedenen Möglichkeiten zum Erstellen von HTML-Listen in JavaScript an.

Verwenden Sie die for-Schleife.
Verwenden Sie die
for-Schleife mit Fragmenten.
ul
(ungeordnete Liste) Elemente durch Erstellen einer LI (Liste) mithilfe der
createElemnt

Beispiel

<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>

Nach dem Login kopieren

Verwendung einer for-Schleife mit FragmentenDies ist die gleiche wie die erste oben besprochene Methode, aber der Unterschied besteht darin, dass wir Fragment zum Einfügen verwenden. Fragment neigt dazu, es getrennt zu halten, was bedeutet, dass es nicht an den DOM-Baum und somit nicht an das echte DOM angehängt ist, sodass der Browser weniger Arbeit leisten muss. Bei der obigen Methode ohne Fragmente verrichtet der Browser viel Arbeit hinter dem Bildschirm, was sich auf die tatsächliche Leistung auswirkt und nicht auf der tatsächlichen Seite gerendert wird. Daher ist es besser, Fragmente zu verwenden.

Um Fragmente zu verwenden, hängen wir zuerst das Listenelement an das Fragment und dann das Fragment an die Liste an, anstatt es ohne das Fragment direkt in das Listenelement einzufügen.

Beispiel

<!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>

Nach dem Login kopieren

Verwenden der forEach()-Methode

forEach()

ist eine Array-Methode in JavaScript, die eine bestimmte Funktion einmal für jedes Element des Elements aufruft. Im Grunde führt sie eine benutzerdefinierte Funktion aus. Eine Rückruffunktion für jedes in der Array-Liste vorhandene Element, was genauso funktioniert wie eine for-Schleife.

Beispiel

<!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>

Nach dem Login kopieren

Also, wir haben alle Möglichkeiten gesehen, eine HTML-Liste direkt mit JavaScript zu erstellen, ich hoffe, es gefällt Ihnen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine HTML-Liste aus einem JavaScript-Array?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!