Skip to content

Instantly share code, notes, and snippets.

@cferdinandi

cferdinandi/1-loop-and-string.html

Created January 28, 2025 18:00
Show Gist options
  • Save cferdinandi/3d94bdf2c374c66f84c75edf50b15ad9 to your computer and use it in GitHub Desktop.
Save cferdinandi/3d94bdf2c374c66f84c75edf50b15ad9 to your computer and use it in GitHub Desktop.
Download ZIP
Watch the tutorial: https://youtu.be/YDPpt5KO9Zs
Raw
1-loop-and-string.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loop + String</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<ul></ul>
<script>
let list = document.querySelector('ul');
let wizards = ['Merlin', 'Ursula', 'Gandalf', 'Radagast'];
// Setup the HTML string
let html = '';
// Loop through each wizard and create a list item
for (let wizard of wizards) {
html += `<li>${wizard}</li>`;
}
// Alt: using forEach
// wizards.forEach(function (wizard) {
// html += `<li>${wizard}</li>`
// });
// Inject the HTML
list.innerHTML = html;
// DO NOT inject on each loop
// for (let wizard of wizards) {
// list.innerHTML += `<li>${wizard}</li>`
// }
</script>
</body>
</html>
Raw
2-map-and-join.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>map() + join()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<ul></ul>
<script>
let list = document.querySelector('ul');
let wizards = ['Merlin', 'Ursula', 'Gandalf', 'Radagast'];
// Loop, create, and inject in one pass
list.innerHTML = wizards.map(function (wizard) {
return `<li>${wizard}</li>`;
}).join('');
</script>
</body>
</html>
Raw
3-create-and-append.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>createElement() + append()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<ul></ul>
<script>
let list = document.querySelector('ul');
let wizards = ['Merlin', 'Ursula', 'Gandalf', 'Radagast'];
// Loop through each wizard
for (let wizard of wizards) {
// Create a list item
let li = document.createElement('li');
li.textContent = wizard;
// Inject it into the DOM
list.append(li);
}
</script>
</body>
</html>
Raw
4-dom-fragments.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>createDocumentFragment() + append()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<ul></ul>
<script>
let list = document.querySelector('ul');
let wizards = ['Merlin', 'Ursula', 'Gandalf', 'Radagast'];
// Create a fragment
let fragment = document.createDocumentFragment();
// Loop through each wizard
for (let wizard of wizards) {
// Create a list item
let li = document.createElement('li');
li.textContent = wizard;
// Add it to the fragment
fragment.append(li);
}
// Append the fragment in one action
list.append(fragment);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment