Building a list

Make new elements with createElement and add them to the page, so a list can grow, one click at a time.

A feed, a shopping basket and a chat are all lists that grow: the code makes a new element and puts it on the page.

A page changes only when your code changes it. To add a line to a list you do three things:

const li = document.createElement("li");   // make a new <li>
li.textContent = "milk";                   // give it text
list.append(li);                           // put it into the list

createElement("li") makes an element that is not on the page yet. append is what puts it there. li.remove() takes one off again.

The hard part is the difference between a list in your script (an array) and the list people see. Pushing to an array changes nothing on the page: the page only changes when you make or remove elements.

Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
Run: Run it and compare the result with your prediction.
Investigate: Trace how each line of code connects to what you see.
Modify: Change the code on purpose and check the result.
Make: Build something new using what you have learned. Expect a few tries; that is normal.

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

page.html

<ul id="list"></ul>
<script>
  const items = ["apples", "bread", "milk"];
  const list = document.querySelector("#list");
  for (const item of items) {
    const li = document.createElement("li");
    li.textContent = item;
    list.append(li);
  }
</script>

How many times does the loop run, and what happens each time?

How many bullet points does the page show?0134

RunRun it and compare the result with your prediction.

Run

Press Run. Type something and click Add: each click makes a new <li> and puts it on the page.

page.html

<input id="item" placeholder="Add an item">
<button id="add">Add</button>
<ul id="list"></ul>
<script>
  const input = document.querySelector("#item");
  const list = document.querySelector("#list");
  document.querySelector("#add").addEventListener("click", function () {
    const li = document.createElement("li");
    li.textContent = input.value;
    list.append(li);
    input.value = "";
  });
</script>

Try it yourselfYour edits are saved in this browser.

I added several items to the list with the box and button.

InvestigateTrace how each line of code connects to what you see.

Investigate

page.html

<input id="item" placeholder="Add an item">
<button id="add">Add</button>
<ul id="list"></ul>
<script>
  const input = document.querySelector("#item");
  const list = document.querySelector("#list");
  document.querySelector("#add").addEventListener("click", function () {
    const li = document.createElement("li");
    li.textContent = input.value;
    list.append(li);
    input.value = "";
  });
</script>

Match code with meaning.

Made is not the same as shown.

The array grows, but the page does not.

Match each line with what it does.

document.createElement("li")

li.textContent = input.value;

list.append(li);

input.value = "";

What makes the new item appear on the page?document.createElement("li")li.textContent = …input.value = ""list.append(li)

Clicking Add changes nothing on the page, and there is no red error. Click the line that is the problem.

ModifyChange the code on purpose and check the result.

Modify

Each li gets its own listener.

Need a hint?

Each new li can have its own listener, made at the same time as the li.

Another hint

Inside the Add handler, li.addEventListener("click", function () { li.remove(); });

Show the expected result

What the finished page looks like — What it should look like. Your words can be different.

Stop early.

Need a hint?

Check the box before you make anything.

Another hint

if (input.value === "") { return; } at the top of the handler stops an empty item.

Show the expected result

Try it yourselfYour edits are saved in this browser.

Click an item to remove it.

This ticks when your page has all of the above.

Do not add an item when the box is empty.

This ticks when your page has all of the above.

MakeBuild something new using what you have learned. Expect a few tries; that is normal.

A list of your own

Make a list of your own that grows as someone types: a shopping list, a homework tracker, a playlist, a scoreboard. Add one more feature: remove on click, a counter of items, a limit. The page on this lesson counts tasks left.

Try it yourselfYour edits are saved in this browser.

I made a list that grows from what someone types, and added a feature of my own.

Info

Where this leads

You can now grow a page. Next: a page that keeps a score between clicks.

You want your page to keep a score that goes up as you click. Where must the score variable be made?In the HTMLInside the loopInside the function, so it is fresh each timeAbove the function, so it keeps its value between clicks

For teachers

Students make elements with createElement and put them on the page with append, loop over an array to build a list, add items from a box, fix a push that never reaches the page, and add features of their own. About 55 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

Students will be able to

I can make a new element and add it to the page.
I can build a list on the page from an array.
I can make each new element do something when clicked.

Before class

Read the unit primer first. This brings together arrays and loops (p5.js) with the page: the array is data, the list on the page is a picture of it. createElement makes an element in memory; append is what shows it. li.remove() takes one away. The classic slip is changing the array and expecting the page to follow, so the bug has no red error. A listener added to each new li is a closure over li: students do not need that word, only that "this li removes itself". Plain append, createElement and remove are enough; we do not use innerHTML on purpose.

Running the lesson

Predict: ask students to count the loop turns on their fingers.
Run: ask where the new li came from, and where it went.
Investigate: for the bug, ask "what does the page know about the array?"
Modify: ask what return does inside a handler.
Make: ask each student what the elements of their list are, and what each one should do.

The hard part (on purpose)

Made is not shown: createElement does nothing visible until append. Ask "is it on the page yet?" at every step.

When students get stuck

Clicking Add changes nothing. Ask: Does the handler make an element and append it? Fix: Make an li, set its text, then list.append(li).
Cannot read properties of null (reading append). Ask: Does the list id match the selector? Fix: Match the id exactly, with #.
Every item removes at once, or the wrong one. Ask: Is the listener inside the handler, on the new li? Fix: Add li.addEventListener inside the Add handler, before append.
Empty items still appear. Ask: Is the check before the li is made? Fix: Put the if and return at the top of the handler.

Stretch and support

Stretch: Add a Clear all button, or keep the items in an array as well, and show how many there are.

Support: Give the Add handler complete and ask students only for the remove-on-click.

Where it leads

Next lesson: a page that keeps a score between clicks.

What each step is for

Investigate: A new element is made with createElement and only appears once it is appended; changing an array does not change the page, so update both.
Modify: A handler can be added to every new element, and an if with return stops a handler early.
a list of your own: Goals only: a list that grows from what someone types, with one more feature of your own.

Now you can

Make a new element and add it to the page.
Build a list on the page from an array.
Make each new element do something when clicked.

Next lesson6. A page that keeps scoreKeep a number between clicks in a variable made above the handler, and use an if to decide when something happens.

Source: content/code/dom/dom-list/lesson.md