JavaScript lesson 23: The web page: new elements, classes and style

What your child will learn

We are learning to make new elements and add them to the page.

Success looks like

• I can make new elements and add them to the page.
• I can add, remove and toggle classes.
• I can change a style – and spell color the way code needs.

Key words

createElement · appendChild · classList · style · CSS

What to have ready

• A device with a web browser (the code runs in the browser – nothing to install)
• Paper for tracing
• A keyboard helps for typing code (a tablet or phone works too)

The big ideas (for the adult)

document.createElement("li") makes a new element. It isn't on the page until you add it with list.appendChild(li), which puts it at the end.

el.classList.add("big"), remove and toggle change an element's classes, which the page's CSS uses for its look. contains checks for one.

el.style.color = "red" changes the text colour. Code always uses the American spelling color: style.colour is just ignored – a classic UK trap!

Worked example – see it

// <h1 id="title">Top tips</h1>
// <p id="msg" class="note">Hello Ben</p>
// <ul id="list"><li>whale</li><li class="star">dog</li><li>fox</li></ul>
// <button id="go">Click me</button>

const li = document.createElement("li")
li.textContent = "cheese"
document.querySelector("#list").appendChild(li)
console.log(document.querySelectorAll("li").length)

It prints:

4

The lesson, step by step