JAVASCRIPT
Dynamically Generate and Append a List of Items
Learn to dynamically create and append multiple new list items (LI) to an unordered list (UL) in the DOM using JavaScript, populating content from an array.
const dataItems = ['Apples', 'Bananas', 'Cherries', 'Dates'];
const myList = document.getElementById('myList');
if (myList) {
dataItems.forEach(itemText => {
const listItem = document.createElement('li');
listItem.textContent = itemText;
myList.appendChild(listItem);
});
}
// HTML Structure (example):
// <ul id="myList"></ul>
// After execution, myList will contain: <li>Apples</li><li>Bananas</li>...
How it works: This snippet demonstrates how to programmatically create <li> elements from an array of strings and append them to an existing <ul> element in the DOM. It iterates through the dataItems array, creates a new list item for each, sets its text content, and then appends it as a child to the <ul> identified by myList. This is a common pattern for rendering dynamic lists.