how to populate a list in html with javascript
function makeList() {
// Establish the array which acts as a data source for the list
let listData = [
'Blue',
'Red',
'White',
'Green',
'Black',
'Orange'
],
// Make a container element for the list
listContainer = document.createElement('div'),
// Make the list
listElement = document.createElement('ul'),
// Set up a loop that goes through the items in listItems one at a time
numberOfListItems = listData.length,
listItem,
i;
// Add it to the page
document.getElementsByTagName('body')[0].appendChild(listContainer);
listContainer.appendChild(listElement);
for (i = 0; i < numberOfListItems; ++i) {
// create an item for each one
listItem = document.createElement('li');
// Add the item text
listItem.innerHTML = listData[i];
// Add listItem to the listElement
listElement.appendChild(listItem);
}
}
// Usage
makeList();
Also in JavaScript:
- javascript loop nested object
- remove whitespace with regex javascript
- location origin js example
- Is there an “exists” function for jQuery
- f string javascript
- traccar attributes list
- angular rebuild
- Unable to resolve module `react/lib/ReactComponentWithPureRenderMixin` from `node_modules\react-navigation\src\views\Header.js`: react/lib/ReactComponentWithPureRenderMixin could not be found within the project
- decode ways javascript
- javascript find first element of array
- how to check leap year in javascript
- what foreach method returns in javascript
- event listener to elements with class
- javascript smooth scroll to anchor element
- package.json laravel best
- loop through json array python
- js detect cmd+s
- javascritp canvas
- global site tag (gtag.js) - google analytics gatsby
- add javascript keyup on input
- parseint function javascript
- javascript get seconds between two dates
- javascript replace text within dom
- notice before reload js