Skip to content

Instantly share code, notes, and snippets.

@bennycode
Created June 27, 2018 21:30
Show Gist options
  • Save bennycode/8b2bce7edcf3a62ba62c33c107e3e298 to your computer and use it in GitHub Desktop.
Save bennycode/8b2bce7edcf3a62ba62c33c107e3e298 to your computer and use it in GitHub Desktop.
Dynamically create a list with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>HTML5</title>
</head>
<body>
<script>
const animals = ['Alligator', 'Bat', 'Chicken', 'Dolphin', 'Eagle', 'Flamingo', 'Guppy', 'Hedgehog', 'Iguana', 'Jaguar', 'Koala', 'Lion', 'Monkey', 'Narwhal', 'Owl', 'Peacock', 'Queen Bee', 'Rat', 'Sheep', 'Turtle', 'Unicorn', 'Vulture', 'Whale', 'Xantus', 'Yorkshire Terrier', 'Zebra'];
const orderedList = document.createElement('ol');
for (const text of animals) {
const listItem = document.createElement('li');
const listItemText = document.createTextNode(text);
listItem.appendChild(listItemText);
orderedList.appendChild(listItem);
}
document.body.appendChild(orderedList);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment