The KIRUPA orange logo! A stylized orange made to look like a glass of orange juice! Tutorials Coding Exercises Videos Books


Customize Theme




Dynamically Create and Populate List Items

by kirupa   |  filed under Coding Exercises

Now that you have good idea of how to create elements in the DOM, let's put all of that fancy book learnin' aside and get our hands dirty by writing some code.

The Challenge

Lists are one of the most popular ways you have for displaying data on the web. The markup for one typically looks as follows:

  <li>Iron Man</li>
  <li>Doctor Strange</li>
  <li>Captain America</li>
  <li>Black Widow</li>

What we are going to do is generate these list items dynamically. To get started, create a new HTML document and add the following contents into it:

<!DOCTYPE html>

  <title>Dynamically Populate List Items</title>
    h1 {
      font-family: sans-serif;
      font-size: 64px;
      color: #CCC;
      padding: 5px;
      margin: 5px;
    ul {
      padding: 0;
      margin: 10px;
    li {
      font-family: sans-serif;
      float: left;
      clear: both;
      padding: 5px;
      list-style-type: none;
      margin: 10px;
      border-radius: 5px;



    var toppings = ["Tomato", "Cheese", "Pepperoni", 
                    "Olives", "Jalapenos", "Pineapple", "Ham"];

      Add each topping from the toppings array 
      as a list item under the ul tag!


If you preview this document in your browser, you won't see much. The task is for you to take the contents of the toppings array, create a list item for each one, set the list item's text content to the corresponding topping, and parent each list item under the ul tag that currently exists.

The Result

You'll know you are done when the final result of your code running looks as follows:

Each topping from our toppings array is neatly represented as the content of a list item. The generated markup will look as follows:

At this point, you should have all the necessary information to get started. Now....ready, set, go!


In case you get stuck, here are a few hints that may help you out:

  1. To find an element in the DOM, this tutorial that covers querySelector will help you out
  2. If you aren't familiar with arrays and how to access items inside them, check out this tutorial first
  3. Typically, creating an HTML element is one step and setting its text content is a separate step
  4. Elements you create exist only in memory until you explicitly nest it under a parent HTML element
  5. You shouldn't manually need to modify the HTML. Everything can be done entirely in JavaScript.

If you are still stuck, post on the forums and a bunch of friendly people will help you out.

Share Your Answer

If you think you have a working solution, don't just keep it to yourself. Share it with others and get some feedback from others just like you. Post your solution to the following thread (you can see the answers if you scroll further down below) and see how your answer stacks up with what others have posted.

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over 100,000 subscribers!


Serving you freshly baked content since 1998!
Killer hosting by (mt) mediatemple

Twitter Youtube Facebook Pinterest Instagram Github