Introduction to Web APIs: Dynamically Generated Elements

This practical lesson explores a combination of multiple Web APIs that can be used to create dynamically generated elements on a page.

Learning Objectives

• Learn how to add an event listener to a button and reference a function to handle the event
• Learn how to create a fetch request to return JSON data
• Learn how to parse JSON with the .json() method
• Learn how to loop through parsed JSON data through the then statement
• Learn how to create a list item element within the for loop
• Learn how to extract specific parts of the parse data to use as text content for the list item
• Learn how to place the list item on the page within the unordered list element

Intended Audience

This lesson is intended for anyone who wants to learn about creating and placing dynamically generated elements on a page.

Prerequisites

Anyone with an interest in dynamically generated elements or Web APIs in general.
The following lessons can be helpful in understanding the concepts presented in this lesson:
Introduction to Web APIs: Fetch API
Introduction to Web APIs: Event Listeners
Introduction to Web APIs: DOM Manipulation