Bagaimana untuk membuat senarai HTML daripada tatasusunan JavaScript?-tutorial js-php.cn

Bagaimana untuk membuat senarai HTML daripada tatasusunan JavaScript?

WBOY

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

ke hadapan

1057 orang telah melayarinya

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

Dalam tutorial ini, kita akan melihat pelbagai cara untuk membuat senarai HTML daripada tatasusunan JavaScript. Jika kita bercakap tentang senarai HTML mudah, maka kita membuat semua senarai secara manual menggunakan ul (senarai tidak tersusun) dan dalam teg li em> (senarai).

Pertimbangkan situasi di mana anda akan mempunyai n item dan perlu mencetaknya dalam senarai, kemudian menulis semua item akan menjadi tugas yang sangat sibuk. projek dan cetak secara manual kan? Ini kemudiannya boleh dilakukan dengan mudah menggunakan kaedah lelaran JavaScript.

Mari kita lihat pelbagai cara untuk membuat senarai HTML dalam JavaScript. gelung lelaran menggunakan tatasusunan mudah untuk gelung Semua item yang terdapat dalam senarai Ini ialah kaedah lalai JavaScript biasa untuk lelaran dan kemudian menambahkan item senarai pada item

createElemnt
menggunakan appendChild.
Contoh

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

Salin selepas log masuk

Menggunakan gelung for dengan serpihan
Ini adalah sama seperti kaedah pertama yang dibincangkan di atas, tetapi perbezaannya ialah kita akan menggunakan Fragment
untuk memasukkan. Fragmen cenderung untuk memisahkannya, bermakna ia tidak dilampirkan pada pokok DOM, jadi ia tidak dilampirkan pada DOM sebenar, maka penyemak imbas perlu melakukan lebih sedikit kerja. Dalam kaedah di atas, tanpa serpihan, penyemak imbas melakukan banyak kerja di belakang skrin, yang menjejaskan prestasi sebenar, dan ia sebenarnya tidak dipaparkan dalam halaman sebenar. Oleh itu, lebih baik menggunakan serpihan.
Untuk menggunakan serpihan, kami mula-mula akan menambahkan item senarai pada serpihan dan kemudian menambahkan serpihan pada senarai, dan bukannya memasukkan terus ke dalam item senarai tanpa serpihan.
p>

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

Salin selepas log masuk

Menggunakan kaedah forEach()

forEach() ialah kaedah tatasusunan dalam JavaScript yang memanggil fungsi tertentu sekali untuk setiap elemen item, pada asasnya ia melaksanakan fungsi panggilan balik Fungsi tersuai untuk setiap item yang terdapat dalam senarai tatasusunan, yang berfungsi sama seperti gelung for. Contoh

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

Salin selepas log masuk

Jadi, kami melihat semua cara untuk membuat senarai html secara langsung menggunakan JavaScript, harap anda menyukainya.
Atas ialah kandungan terperinci Bagaimana untuk membuat senarai HTML daripada tatasusunan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!