About this snippet

Dynamically add items to an HTML unordered list using JavaScript. Useful for displaying data fetched from an API or reflecting user input in real-time.

Size
597 bytes
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
623

Collections

<ul id="myList"></ul>
<button id="addItemBtn">Add Item</button>
ul#myList {
  list-style-type: disc;
  padding-left: 20px;
  margin-top: 10px;
  border: 1px solid #eee;
  padding: 10px;
  min-height: 50px;
}
ul#myList li {
    margin-left: 30px;
}
button#addItemBtn {
  margin-top: 10px;
  padding: 8px 15px;
  cursor: pointer;
}
document.getElementById('addItemBtn').addEventListener('click', function() {
  var list = document.getElementById('myList');
  var newItem = document.createElement('li');
  newItem.textContent = 'New Item ' + (list.children.length + 1);
  list.appendChild(newItem);
});
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save