Bagaimana Anda mengisi daftar dalam javascript?

Selamat datang di tutorial tentang cara membuat daftar HTML dari array atau objek Javascript. Perlu menampilkan array data dengan baik?

Untuk membuat daftar HTML dari array di Javascript

1. Buat daftar HTML var ol = document.createElement("ol");
2. Ulangi array dan tambahkan item daftar for (let i of ARRAY) { let li = document.createElement("li"); li.innerHTML = i; ol.appendChild(li); }
3. Tambahkan daftar ke tempat yang Anda inginkan document.getElementById("TARGET").appendChild(ol);

Itu mencakup dasar-dasarnya, baca terus untuk contoh lainnya

ⓘ Saya telah menyertakan file zip dengan semua kode sumber di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk

TLDR – SLIDE CEPAT

Unduh & Catatan

UNDUH & CATATAN

Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan

CATATAN CEPAT

DOWNLOAD KODE CONTOH

Klik di sini untuk mengunduh semua kode sumber contoh, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri

ARRAY / OBJEK UNTUK DAFTAR

Baiklah, sekarang mari kita masuk ke contoh pembuatan daftar HTML dari array atau objek

1) BUAT dan TAMBAHKAN ELEMEN HTML

1-buat-elemen. html

<!-- (A) DIV CONTAINER -->
<div id="demoA"></div>
 
<!-- (B) JAVASCRIPT -->
<script>
// (B1) DUMMY ARRAY
var arr = ["Apple", "Banana", "Cherry"];

// (B2) CREATE LIST
var list = document.createElement("ol");
for (let i of arr) {
  let item = document.createElement("li");
  item.innerHTML = i;
  list.appendChild(item);
}

// (B3) APPEND LIST TO CONTAINER
document.getElementById("demoA").appendChild(list);
</script>

Ini adalah “versi lengkap” dari cuplikan di pendahuluan – Seharusnya cukup mudah dan cukup jelas

• Buat daftar
• Ulangi dan tambahkan daftar item
• Kemudian lampirkan seluruh daftar ke mana pun Anda inginkan

2) STRING HTML MANUAL

2-buat-html. html

<!-- (A) DIV CONTAINER -->
<div id="demoB"></div>
 
<!-- (B) JAVASCRIPT -->
<script>
// (B1) DUMMY ARRAY
var arr = ["Apple", "Banana", "Cherry"];

// (B2) CREATE LIST
var list = "<ol>";
for (let i of arr) {
  list += `<li>${i}</li>`;
}
list += "</ol>";

// (B3) APPEND LIST TO CONTAINER
document.getElementById("demoB").innerHTML = list;
</script>

Jika “cara berorientasi objek” di atas untuk membuat elemen HTML tidak cocok untuk Anda, inilah alternatifnya – Kami membuat string daftar HTML secara manual, lalu melampirkannya ke wadah

3) OBJEK BERSARANG

3-objek. php

<!-- (A) DIV CONTAINER -->
<div id="demoC"></div>

<!-- (B) JAVASCRIPT -->
<script>
// (B1) DUMMY OBJECT
var obj = {
  "Fruits" : ["Apple", "Banana", "Cherry"],
  "Vegetables" : ["Celery", "Cabbage", "Carrot"]
};

// (B2) CREATE LIST
var list = document.createElement("ul");
for (let i in obj) {
  // (B2-1) SUB-LIST HEADING
  let item = document.createElement("li");
  let subitem = document.createElement("strong");
  subitem.innerHTML = i;
  list.appendChild(item);
  item.appendChild(subitem);

  // (B2-2) SUB-LIST ITEMS
  let sublist = document.createElement("ul");
  item.appendChild(sublist);
  for (let j of obj[i]) {
    subitem = document.createElement("li");
    subitem.innerHTML = j;
    sublist.appendChild(subitem);
  }
}

// (B3) APPEND LIST TO CONTAINER
document.getElementById("demoC").appendChild(list);
</script>

Terakhir, bagaimana kita menangani objek bersarang?

BIT & LINK EKSTRA

Itu saja untuk tutorialnya, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda

LINK dan REFERENSI

• Cara Membuat dan Menata Daftar HTML – Code Boxx
• Daftar Horisontal Responsif Dalam HTML CSS – Code Boxx
• Daftar Sortir – Kotak Kodex

LEMBAR CHEAT INFOGRAFIS

Terima kasih telah membaca, dan kami telah sampai pada akhir. Saya harap ini membantu Anda untuk lebih memahami, dan jika Anda ingin berbagi sesuatu dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode

Bagaimana cara mengisi daftar di JavaScript?

Bagaimana cara mengisi array dalam JavaScript?

Bagaimana Anda mengisi array daftar?

Bagaimana cara mengisi daftar dropdown secara dinamis di JavaScript?