Displaying Fetched Data in the DOM

Learn the complete pattern: fetch data from an API, parse it, and render it into the page using DOM manipulation.

Step 1 of 6

The Complete Pattern: Fetch, Parse, Render

So far you've learned to fetch data and parse JSON. But data sitting in a JavaScript variable doesn't help your users — they need to see it on the page. The final step is taking fetched data and turning it into DOM elements that appear in the browser.

The complete data-fetching pattern has three stages:

Fetch — Make the HTTP request and wait for the response
Parse — Convert the JSON response into a JavaScript object or array
Render — Create DOM elements, fill them with data, and add them to the page

This is exactly what apps like Instagram, Twitter, and YouTube do. When you open Instagram, the app fetches your feed data as JSON from Instagram's servers, then creates DOM elements (images, captions, like buttons) for each post. The HTML that arrives from the server is just a skeleton — all the actual content gets injected by JavaScript after the data is fetched.

Think of it this way: Think of it like cooking a meal. Fetching is going to the grocery store and bringing ingredients home. Parsing is unpacking the bags and laying everything out on the counter. Rendering is cooking the food and plating it beautifully for your guest. Each step depends on the one before it, and you can't skip any of them.

Learn more on MDN

Document.createElement()