Changing the Page with JavaScript

Mission 4, step 2. Until now your JavaScript talked to the console. Today it changes the page itself.

Quick check

Quick recall

10 XP

The DOM

The browser turns your HTML into a tree of objects: the DOM (Document Object Model). document is the whole page. When JavaScript changes the tree, the page changes at once.

Find, then change

document.getElementById("title") finds the element with id="title", or gives null. Keep the result in a constant.

Step by step

Find, change, see

Required 10 XP

textContent or innerHTML?

// HTML: <p id="message"></p>
const message = document.getElementById("message");
message.textContent = "<strong>Warning!</strong>";   // shows the tags as text
message.innerHTML = "<strong>Warning!</strong>";     // shows a bold word

textContent keeps tags as plain text, so it is safe for words that visitors type. innerHTML builds real elements. Use it only for HTML that you wrote yourself: visitors' text could hide harmful code. innerText gives the text as you see it. The slides say it gives tags too, but only innerHTML does.

Grouping

textContent or innerHTML?

Required 15 XP

Practice

Change the heading

Required 30 XP

From slides 6 and 8 of the course: change the heading text and its colour, then put a bold word into the box.

Add new elements

createElement() makes an element in memory. You see it only after you add it with appendChild() or append() (at the end) or prepend() (at the start).

const newBox = document.createElement("div");   // make
newBox.textContent = "Hello, new box!";          // fill
newBox.classList.add("main-box");                // a class
newBox.id = "box-1";                             // an id
newBox.style.padding = "20px";                   // a style
document.body.appendChild(newBox);               // add

On the slide, the last line is cut off at the edge. Without it, the box never appears.

Practice

Add a skill

Required 30 XP

Like slides 12 to 14 of the course: make a new list item in three steps and add it to the skills list.

DOM

The tree of objects that the browser builds from your HTML.

textContent

The text of an element. Tags in it stay plain text.

innerHTML

The HTML inside an element. Tags in it become elements.

appendChild()

Adds an element at the end of another element.

In short

• Find, then change: getElementById(), then textContent, innerHTML or style.
• textContent for visitors' text, innerHTML only for your own HTML.
• A new element: make it, fill it, add it with appendChild().

Sources

1. MDN Web Docs (2026). Introduction to the DOM.
2. MDN Web Docs (2026). Document: getElementById() method.
3. MDN Web Docs (2026). Node: textContent property and Element: innerHTML property (security considerations).
4. MDN Web Docs (2026). HTMLElement: style property.
5. MDN Web Docs (2026). Document: createElement() method, Node: appendChild() method and Element: classList property.