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.
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.
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
Javascript- Functions Tutorial
Javascript- Onload Event Handler
Javascript- Onunload Event Handler
Javascript- Onfocus Event Handler
Javascript- Onblur Event Handler
Javascript- Onclick Event Handler
Javascript- Onchange Event Handler
Javascript- Onkeydown Event Handler
Javascript- Onkeyup Event Handler
Javascript- Onkeypress Event Handler
Javascript- Onmouseover Event Handler
Javascript- Onmousedown Event Handler
Javascript- Onmouseup Event Handler
Javascript- Onmouseout Event Handler
Javascript- Onreset Event Handler
Javascript- Onabort Event Handler
Javascript- Oncopy Event Handler