Dynamically Create and Populate List Items

by kirupa   |   8 May 2018

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:

<ul>
  <li>Iron Man</li>
  <li>Thor</li>
  <li>Doctor Strange</li>
  <li>Star-Lord</li>
  <li>Thanos</li>
  <li>Spider-Man</li>
  <li>Captain America</li>
  <li>Gamora</li>
  <li>Falcon</li>
  <li>Black Widow</li>
</ul>

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>
<html>

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

<body>
  <h1>Toppings</h1>
  <ul>

  </ul>

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

    /*
      Add each topping from the toppings array 
      as a list item under the ul tag!
    */
  
  </script>
</body>

</html>

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!

Hints

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.

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!

THE KIRUPA NEWSLETTER

Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!

( View past issues for an idea of what you've been missing out on all this time! )

WHAT DO YOU THINK?

NEWSLETTER

No spam. No fluff. Just awesome content sent straight to your inbox!

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!