Add new item button
Here is an example of how you can add a "New Item" button to a list:
HTML:
<button id="new-item-btn">New Item</button>
<ul id="item-list">
<!-- list items will go here -->
</ul>
JavaScript:
const newItemBtn = document.getElementById('new-item-btn');
const itemList = document.getElementById('item-list');
newItemBtn.addEventListener('click', () => {
const newItem = prompt('Enter new item name:');
if (newItem) {
const listItem = document.createElement('li');
listItem.textContent = newItem;
itemList.appendChild(listItem);
}
});
This code adds a button with the text "New Item" and an unordered list (<ul>
) to the page. When the button is clicked, it prompts the user to enter a new item name, and if the user enters a value, it creates a new list item with that text and appends it to the list.
You can customize the appearance and behavior of the button and list items as needed.
Example:
Here is an example of what the code might look like in action:
Initial state:
- New Item button: [New Item]
- List: (empty)
After clicking the button:
- New Item button: [New Item]
- List: Item 1
After entering a new item name:
- New Item button: [New Item]
- List: Item 1
- Item 2
And so on.