javascript · level 2 · unit 3 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Make an element with , then it.
document.createElement("li") makes a fresh <li> element. At first it floats off the page, like a jigsaw piece still in your hand: it exists, but nobody can see it.
Fill it in by setting its .textContent or adding classes. Then append it: guests.append(guest) puts it inside the list, after everything already there. Only then does it appear.
Each call to createElement makes a new, separate element, so make one for every thing you want to show.
<h2>Party guests</h2>
<ul id="guests">
<li>Aisha</li>
</ul>const guests = document.querySelector("#guests");
const guest = document.createElement("li");
guest.textContent = "Ben";
guests.append(guest);Press run it to bring the page to life.
console
nothing logged yet
The tag name goes in without angle brackets: createElement("li"), not "<li>".
guess first
Two new dishes, one append. What is on the menu?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<ul id="menu">
<li>Soup</li>
</ul>const menu = document.querySelector("#menu");
const pudding = document.createElement("li");
pudding.textContent = "Jelly";
const salad = document.createElement("li");
salad.textContent = "Salad";
menu.append(salad);your turn
Your turn. Add a new high score.
Type the tag for a list item in the first blank, and a name with a score in the second, like Sam: 820. Press run to see it join the table.
the page your code works on
<h2>High scores</h2>
<ol id="scores">
<li>Zara: 900</li>
<li>Omar: 750</li>
</ol>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- the table has three scoresnot checked yet
- the new score is last and not emptynot checked yet
fix it
The whole playlist vanishes! Fix it!
the page your code works on
<h2>Road trip songs</h2>
<ul id="playlist">
<li>Yellow Submarine</li>
</ul>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- the playlist has two songsnot checked yet
- the new song comes lastnot checked yet
- Something got appended, but in the wrong place. Read line 4 out loud.
a.append(b)putsbinsidea. Here the playlist went inside the song, which is not on the page.- Change line 4 to playlist.append(song); then press run.
nailed it
you built new parts of the page. :D
document.createElement("li")makes a new element off the page.- Fill it in, then
appendit to show it. a.append(b)putsbinsidea, at the end.
new words in your collection
- createElement
- append
This lesson isn’t saved. A free account remembers every lesson you finish.