From the course: HTML for Programmers
Join today to access over 24,800 courses taught by industry experts.
Dynamically generate HTML elements with JavaScript
From the course: HTML for Programmers
Dynamically generate HTML elements with JavaScript
- [Instructor] Up until this point, we've discussed how we can create webpages using HTML but what if we don't have access to our data until we make a request? We can use JavaScript to dynamically generate DOM nodes once we have the data we need. For example, let's go back to our social card example from the nesting elements video. We know the HTML elements that we'll need to create the social cards but we don't have the data that we need. Let's simulate this in JavaScript With data represented in an array of objects. Each object has a name, city, country, and avatar image. This is the HTML we want to create for each user. So how do we go about creating these elements? First, we'll want to iterate over each user and generate nodes for each piece of information. For this, we'll use a forEach loop. Now let's start from the outermost node, in this case, the div that wraps our social card and work our way inward and downward.…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.