JavaScript Simplified · One concept, one day, one project · Day 16 of 32

Creating and Removing Elements

Building new pieces of a page from JavaScript, and taking them away. You turn a list of tasks into real items on the page.

By the end of today you can

Create a new element with createElement
Add it to the page with append
Take an element off the page with remove
Build a to-do list from data

Until now you changed elements that were already in the HTML. But a to-do list, a feed, a set of search results: these elements do not exist until the data arrives. Today JavaScript creates elements and adds them to the page.

1. Creating an Element

Three steps: create the element, give it some content, then add it to the page.

document.createElement("li") makes a new, empty list item (not on the page yet).
Set its textContent to give it words.
parent.append(newElement) puts it inside a parent that is on the page.

What this code doesJavaScript creates one new list item and adds it to the list.

index.html

1
2
3

<ul id="list">
  <li>First (from HTML)</li>
</ul>

app.js

// 1. create
const item = document.createElement("li");
// 2. fill
item.textContent = "Second (created by JavaScript)";
// 3. add to the list that is on the page
document.getElementById("list").append(item);

BROWSERindex.html  ·  after the new item is added

The first item came from HTML; the second was built and added by JavaScript. The page now shows both.

2. Building Many From Data

The real power is a loop: take an array of data and build one element for each item. This is how every list on the web is drawn.

What this code doesA loop turns an array of tasks into list items on the page.

index.html

<ul id="todo"></ul>

app.js

const tasks = ["Buy data", "Finish Day 16", "Rest"];
const list = document.getElementById("todo");

// one element per task
for (let i = 0; i < tasks.length; i++) {
  const li = document.createElement("li");
  li.textContent = tasks[i];
  list.append(li);
}

BROWSERindex.html  ·  after the loop builds the list

An empty list in the HTML, an array of data, a loop that builds an element for each: that is the shape behind feeds, carts and search results everywhere.

3. Removing an Element

element.remove() takes an element off the page. Select it, then remove it.

What this code doesJavaScript removes the second item from a list.

index.html

<ul id="list">
  <li>Keep me</li>
  <li id="gone">Remove me</li>
  <li>Keep me too</li>
</ul>

app.js

document.getElementById("gone").remove();

BROWSERindex.html  ·  after removing the middle item

Today’s Mini Project

📝 Dynamic To-Do List

Start from an array of tasks and build the whole list on the page with a loop. (On Day 19 you will add new tasks from a form; today JavaScript draws the starting list.)

What this code doesThe to-do list is drawn entirely from data.

index.html

1
2

<h3>My tasks</h3>
<ul id="tasks"></ul>

style.css

ul{padding-left:20px}li{margin:6px 0}

app.js

const tasks = ["Revise functions", "Build the to-do list", "Push to GitHub"];
const list = document.getElementById("tasks");

for (let i = 0; i < tasks.length; i++) {
  const li = document.createElement("li");
  li.textContent = (i + 1) + ". " + tasks[i];
  list.append(li);
}

BROWSERindex.html  ·  after the list is built from the array

Challenge (15 minutes)

After building the list, create one more li that says how many tasks there are (use tasks.length) and append it. Expected: a final line like "3 tasks in total".

Try This

Build a list of your three favourite foods from an array, using a loop.

Expected: three list items on the page, one per food, all created by JavaScript.

Picture This

You have finished Layer 3. JavaScript can now read the page, change its content, change its look, and build new parts from data. Next week you make the page respond to the person using it: clicks, typing and forms.

Checkpoint

What are the three steps to add a new element?

Create it with createElement, fill it (for example set textContent), then add it to a parent on the page with append.

How do you draw a list from an array?

Loop over the array, and for each item create an element, set its text, and append it to a parent. That is how feeds and lists are built.

How do you take an element off the page?

Select it and call remove() on it, for example element.remove().

Tick Before You Move On

☐ I can create a new element with createElement
☐ I can add it to the page with append
☐ I can remove an element with remove
☐ I built the Dynamic To-Do List from data

Quick Recap

createElement makes a new element, not yet on the page. append adds an element inside a parent that is on the page. A loop over data builds one element per item: the pattern behind every list. remove takes an element off the page.

Next: Day 17, and a new layer: making the page respond to the user. You start with events, the moments your code can react to.

Creating and Removing Elements

1. Creating an Element

2. Building Many From Data

3. Removing an Element

Today’s Mini Project

Checkpoint

Learn this with a real instructor