การดึงข้อมูลจาก array มาแสดงผลใน JavaScript - กอไก่ | เริ่มต้นเขียนเว็บอย่างง่าย

การแสดงข้อมูลจาก array โดยให้แต่ละค่าอยู่ใน </div>

ตัวอย่างโค้ด JavaScript + HTML ด้านล่างนี้จะช่วยให้เห็นภาพชัดเจน

โค้ด HTML

<div id="container"></div>

โค้ด CSS

.item {
      padding: 8px;
      margin: 4px;
      background: #f0f0f0;
      border: 1px solid #ccc;
    }

โค้ด JavaScript

// array
    const fruits = ["Apple", "Banana", "Cherry", "Durian"];

    // เcontainer
    const container = document.getElementById("container");

    // loop array each into div
    fruits.forEach(item => {
      const div = document.createElement("div");
      div.className = "item";
      div.textContent = item;
      container.appendChild(div);
    });

สรุป

fruits คือ array ที่เราต้องการแสดงผล
ใช้ forEach เพื่อวนลูปแต่ละค่า
สร้าง </div> ใหม่ด้วย document.createElement("div")
ใส่ข้อความด้วย textContent
เพิ่มเข้าไปใน container ด้วย appendChild
ผลลัพธ์: แต่ละผลไม้จะถูกแสดงใน </div> แยกกัน