How to Add a New li Element into a ul on Click of an Element with JavaScript?

# Summary

The article explains how to dynamically add a new list item (`li`) to an unordered list (`ul`) when a button is clicked using JavaScript.

# Abstract

The article titled "How to Add a New li Element into a ul on Click of an Element with JavaScript?" provides a technical guide on creating interactive web pages by demonstrating the process of adding new elements to a list dynamically. It begins by identifying the common need to add items to a list in response to user actions, such as clicking a button. The author then proceeds to illustrate the JavaScript code required to achieve this functionality. The code involves selecting the button and list elements using `document.querySelector`, adding an event listener to the button, and defining the event handler function that creates a new `li` element, appends text to it, and finally appends the `li` to the `ul`. The article concludes by reiterating the method for adding a new list item on click, ensuring that the reader understands the process and can implement it in their own projects.

# Opinions

- The article assumes that adding list items dynamically is a useful and common feature in web development.
- It emphasizes the importance of understanding JavaScript event handling and DOM manipulation for creating interactive user interfaces.
- The author suggests that the technique described is straightforward and efficient for updating lists in real-time based on user interaction.
- The inclusion of a real-world example and code snippets indicates that the article is aimed at developers with practical implementation in mind.

Add a New li Element into a ul on Click of an Element with JavaScript

To add a new li element into a ul on click of an element with JavaScript, we can add a click listener to the element we want to click to add the li with.

For instance, if we have:

<button>
  add
</button>
<ul>

</ul>

Then we can write:

const btn = document.querySelector('button')
const ul = document.querySelector('ul')
btn.addEventListener('click', () => {
  const li = document.createElement("li");
  li.appendChild(document.createTextNode("foo"));
  ul.appendChild(li);
})

to add the click listen to the button with JavaScript.

We get the button an ul elements with document.querySelector .

Then we call addEventListener to add a click listen to the btn button.

In the click listener, we create a new li element with document.createElement .

Then we call li.appendChild to add a text node created by the createTextNode method as its content.

And then we call ul.appendChild with li to add the li into the ul .

How to Add a New li Element into a ul on Click of an Element with JavaScript?

Add a New li Element into a ul on Click of an Element with JavaScript

Conclusion

In Plain English 🚀