Changing the Page (DOM Manipulation)

Change text, styles, classes and attributes, and create or remove elements.

Lesson 34 of 56Intermediate13 min read

Once you've selected an element, you can change anything about it: its text, classes, styles and attributes. You can also create brand-new elements and remove old ones. This is how interactive websites update what you see without reloading the page.

DOM manipulation is where your JavaScript becomes visible to visitors. A basket counter that goes up, an error message that appears under a form field and a menu that opens are all small changes to the DOM. This lesson covers the handful of tools that handle almost all of those jobs, and the safe way to use them.

Changing text and HTML

  • el.textContent = "Hi" sets plain text. It's safe, because any <tags> in the text are displayed as text rather than turned into elements.
  • el.innerHTML = "<strong>Hi</strong>" sets HTML. It's powerful, but never use it with text typed by visitors, because they could inject harmful code. This kind of attack is called cross-site scripting (XSS).
  • input.value reads or sets what's in a form field.

When in doubt, use textContent. It's also faster, because the browser doesn't have to interpret any HTML.

Changing styles with classList

JavaScript
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("open");     // add if missing, remove if present
el.classList.contains("open");   // true or false

Define how each state looks in CSS, then switch classes in JavaScript. Keeping the styling in your stylesheet means a designer can change the look of the "open" menu without touching any JavaScript.

Inline styles and attributes

  • el.style.backgroundColor = "gold" sets an inline style. CSS property names become camelCase in JavaScript.
  • el.setAttribute("aria-expanded", "true"), el.getAttribute("href") and el.removeAttribute("disabled") work with any attribute.
  • Many attributes are also properties: img.src, link.href and button.disabled = true.
  • data-* attributes appear in el.dataset, so data-price="9" becomes el.dataset.price.

Inline styles suit values that are calculated, such as the width of a progress bar. For on/off states, classes are cleaner.

Creating, adding and removing elements

JavaScript
const li = document.createElement("li");
li.textContent = "New task";
list.append(li);    // add as the last child
list.prepend(li);   // or as the first child
li.remove();        // delete it

append can take several elements or strings at once, and el.replaceChildren() empties an element completely. An element you create exists only in memory until you add it to the page.

DOM Manipulation Syntax

DOM changes

el.textContent = "text";
el.classList.toggle("active");
el.style.color = "tomato";
el.setAttribute("title", "Hello");
const item = document.createElement("li");
parent.append(item);
item.remove();

DOM Manipulation Summary

  • textContent sets plain text safely; avoid innerHTML with anything a visitor typed.
  • Use classList to add, remove and toggle classes defined in CSS.
  • style, setAttribute and dataset change styles and attributes.
  • createElement, append, prepend and remove add and delete elements.
  • Rebuild the page from your data whenever the data changes.

DOM Manipulation Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Text, classes and styles

const alertBox = document.querySelector("#alert");
const button = document.querySelector("#done");

alertBox.textContent = "Saved! ✅";
alertBox.classList.add("success");
alertBox.style.borderLeft = "5px solid #17a865";

button.disabled = true;
button.textContent = "Done";

console.log(alertBox.classList.contains("success"));
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 4Replace the text.
  2. Line 5Add a class, and the CSS for .alert.success takes over.
  3. Line 6An inline style. border-left becomes borderLeft in JavaScript.
  4. Lines 8 to 9Properties like disabled and textContent work on buttons too.
Example 2

Building a list from an array

const books = [
  { title: "The Hobbit", read: true },
  { title: "Dune", read: false },
  { title: "Matilda", read: true },
];

const list = document.querySelector("#books");

for (const book of books) {
  const li = document.createElement("li");
  li.textContent = book.title;
  if (book.read) {
    li.textContent += " ✓";
    li.style.color = "gray";
  }
  list.append(li);
}

console.log(list.children.length, "books shown");
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 5The data.
  2. Lines 10 to 18For each book: create an li, fill it in, style it, and append it.
  3. Line 12textContent is safe even if a title contained < characters.
Example 3

Removing and toggling

Click the items to toggle them; the button removes completed ones.

const items = document.querySelectorAll("#todo li");

items.forEach(li => {
  li.addEventListener("click", () => li.classList.toggle("done"));
});

document.querySelector("#clear").addEventListener("click", () => {
  document.querySelectorAll("#todo .done").forEach(li => li.remove());
  console.log("Remaining:", document.querySelectorAll("#todo li").length);
});
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 4toggle adds done if missing, removes it if present.
  2. Line 8Find every completed item and delete it.

Common DOM Manipulation Mistakes

innerHTML with user input

Don't
comment.innerHTML = userText; // a user could type <img src=x onerror="…">
Do
comment.textContent = userText;

Treat anything a user typed as text, never as HTML.

Styling with lots of inline styles

Don't
box.style.background = "red";
box.style.color = "white";
box.style.border = "2px solid black";
Do
box.classList.add("is-error");
/* .is-error { background: red; color: white; border: 2px solid black; } */

className overwriting classes

Don't
el.className = "active"; // removes every other class!
Do
el.classList.add("active");

DOM Manipulation in Real Projects

What this powers

Adding an item to a basket and updating the counter, showing an error under a form field, switching tabs, opening a mobile menu, showing search results as you type and switching dark mode on and off are all DOM manipulation, usually triggered by events.

DOM Manipulation Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Change the text safely and turn on the open class.

const menu = document.querySelector(".menu");
menu. = "Menu (open)";
menu.classList.("open");
Multiple choicemedium

Which is safe to use with text a user typed?

Multiple choicemedium

What does el.classList.toggle("dark") do?

Fix the bugmedium

The code should add three <li> items to the list and make the title red. Fix the mistakes.

const colors = ["Red", "Green", "Blue"];
const list = document.querySelector("#colors");

colors.forEach(c => {
  const li = document.createElement("<li>");
  li.textContent = c;
  list.append;
});

document.querySelector("#title").style.colour = "red";
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Three list items exist
  • Items have the right text
  • Title is red
  • No errors

DOM Manipulation Quiz

3 questions to check what you learned.

  1. Which method creates a new element?

    • document.newElement("p")
    • document.make("p")
    • new Element("p")
    • document.createElement("p")

  2. How do you read data-price="12" from an element?

    • el.price
    • el.data("price")
    • el.attributes.price
    • el.dataset.price

  3. In JavaScript, what is the CSS property font-size called on el.style?

    • fontSize
    • font-size
    • FontSize
    • font_size

DOM Manipulation Challenge

Render a scoreboard

Given the players array:

  1. For each player, create an <li> with text like Ana: 120
  2. Add the class leader to the li of the player with the highest score
  3. Append them all to #board
  4. Set the #count text to 3 players
const players = [
  { name: "Ana", score: 120 },
  { name: "Bo", score: 340 },
  { name: "Cal", score: 90 },
];
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Three items in the board
  • Item text looks like "Ana: 120"
  • Only Bo is the leader
  • Count says "3 players"

Related JavaScript topics

33DOM: Selecting ElementsFind elements on the page with querySelector, querySelectorAll and friends.36EventsReact to clicks, typing, form submits and key presses.24Array Methods (map, filter…)Transform, filter, search, sort and total arrays in one readable line.
Esc
↑↓ to navigateEnter to open