How to Create a Dynamic HTML List with Javascript

In this article, we show how to create a dynamic HTML list with Javascript.

With this list, we can add rows to the list dynamically.

To demonstrate this, look at the list below.

Item 1
Item 2
Item 3

So let's now go over the code of how to do this in Javascript.

HTML Code

The first thing we'll do is go over the HTML code.

This is comprised of a button followed by an unordered list.

The code is shown below.

<button onclick="addelement();">Add Item</button> <br/><br/> <ul id="thelist"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

So as you can see, we can have basic HTML.

We have an HTML button that has an onclick() event handler function set to the function, addelement()

We then have an unordered list that has an ID of "thelist"

We then have a bunch of items in the list. We actually have 3 items. These items are Item 1, Item 2 and Item 3.

We want to create a button that adds a new item and continues the count. So the next item would be Item 4, then Item 5, Item 6, etc.

We give this functionality in Javascript.

So next we go to the Javascript code.

Javascript Code

So HTML is more or less a static langugage. It can't really give functionality to a form such as creating a dynamic list.

This is where Javascript comes in.

Javascript adds functionality so that if a user clicks the 'Add Item' button, an additional item is added to the list.

The code to do this is shown below.

<script> var counter= 4; function addelement() { var completelist= document.getElementById("thelist"); completelist.innerHTML += "<li>Item " + counter + "</li>"; counter++; } </script>

So remember that we have an HTML that has 3 items already in the list.

Therefore, we start the counter at 4.

We then have a function, addelement()

Remember that this function is triggered when the 'Add Element' button is clicked.

So we create a variable, completelist, that gets the element with an id of "thelist"

Remember that we gave the unordered list an id of "thelist". So this is referring to the unordered list.

We then take the contents of the completelist, represented by, completelist.innerHTML, and we append to it, "<li>Item " + counter + "</li>";

This adds another list item starting at 4.

We then increment the counter using the statement, counter++, so that the next one is 5, then 6, then 7...

So now we have created a dynamic HTML list with Javascript.

A user can add how many new items as wanted.

Of course, this example probably doesn't serve a great real-world use. However, it is a starting block to create something of real-world use. For example, instead of just having the content, Item #, appear, you can create another text field, such as for some sort of calculation, as many sites do.

So this serves as a starting block that can trigger more advanced applications.

And this is how to create a dynamic HTML list with Javascript.

Related Resources

HTML Comment Box is loading comments...

Learning about Electronics

How to Create a Dynamic HTML List with Javascript

HTML Code

Javascript Code