🖼️ Display Fetched Data Using JavaScript

Once you fetch data using fetch() or async/await, the next step is to display it on your webpage dynamically using DOM methods.

📦 Example: Displaying a List of Users

<ul id="userList"></ul>

async function loadUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();

  const list = document.getElementById("userList");
  list.innerHTML = "";

  users.forEach(user => {
    const li = document.createElement("li");
    li.textContent = user.name + " (" + user.email + ")";
    list.appendChild(li);
  });
}

loadUsers();

🎯 Output Example

">
• Leanne Graham (Sincere@april.biz)
• Ervin Howell (Shanna@melissa.tv)
• Clementine Bauch (Nathan@yesenia.net)

🧠 Pro Tips

• Always clear the container using innerHTML = "" before inserting new data.
• You can insert data into tables, cards, dropdowns, etc.
• Consider error handling for failed fetches or empty responses.