suchen

Heim >Web-Frontend >js-Tutorial >Wie erstelle ich eine HTML-Liste aus einem JavaScript-Array?

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

WBOY
WBOYnach vorne
2023-08-24 22:29:021112Durchsuche

如何从 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.

    • Verwenden Sie die forEach()-Schleife Die Idee besteht darin, mit einem einfachen for-Schleifenarray All zu iterieren In der Liste vorhandene Elemente Dies ist eine normale JavaScript-Standardmethode zum Iterieren und anschließenden Anhängen der Listenelemente an die
  • ul

    (ungeordnete Liste) Elemente durch Erstellen einer LI (Liste) mithilfe der

    createElemnt
    • -Methode mit appendChild
.

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

p>

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>

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>

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!

JavaScript html for foreach 回调函数 循环 dom ul li
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie erstelle ich eine Zeichenfolge durch Verketten von Elementen eines Arrays in JavaScript?Nächster Artikel：Wie erstelle ich eine Zeichenfolge durch Verketten von Elementen eines Arrays in JavaScript?

In Verbindung stehende Artikel

Mehr sehen