21. JavaScript DOM Changing Content

What you will learn

How to change text, attributes, and styles
How to use classList
How to create, add, and remove elements

Changing text

textContent sets plain text and is the safe default. innerHTML reads HTML, so use it only with HTML you wrote yourself.

Example

<p id="a">Old text</p>
<p id="b">Old text</p>

<script>
  document.getElementById("a").textContent = "New <b>plain</b> text";
  document.getElementById("b").innerHTML = "New <b>bold</b> text";
</script>

Output (after the script runs)

New <b>plain</b> text

New bold text

Changing attributes

Use getAttribute and setAttribute, or the property directly (link.href).

Example

<a id="link" href="#">A link</a>
<p id="demo"></p>

<script>
  const link = document.getElementById("link");
  link.setAttribute("href", "https://example.com");
  link.setAttribute("title", "Example website");
  link.textContent = "Visit Example";

  document.getElementById("demo").textContent =
    "href is now: " + link.getAttribute("href");
</script>

Output (after the script runs)

Visit Example

href is now: https://example.com

Changing styles

The style property sets inline styles. CSS property names become camelCase: background-color is backgroundColor.

Example

<p id="box">Style me</p>

<script>
  const box = document.getElementById("box");
  box.style.backgroundColor = "#0d6efd";
  box.style.color = "white";
  box.style.padding = "12px";
</script>

Output (after the script runs)

Style me

classList: the better way to style

Instead of many inline styles, define a CSS class and switch it on and off. That keeps styling in CSS.

Method	Does
`classList.add("x")`	Adds a class
`classList.remove("x")`	Removes a class
`classList.toggle("x")`	Adds it if missing, removes it if present
`classList.contains("x")`	True if present

Example

<style>
  .highlight { background: yellow; font-weight: bold; }
</style>

<p id="text">Toggle my highlight.</p>
<button id="btn" type="button">Toggle</button>

<script>
  document.getElementById("btn").addEventListener("click", function () {
    document.getElementById("text").classList.toggle("highlight");
  });
</script>

Output (before clicking; run it in the editor)

Toggle my highlight.

Creating and adding elements

Create with createElement, fill it, then place it in the page with appendChild or append.

Example

<ul id="list">
  <li>First</li>
</ul>

<script>
  const li = document.createElement("li");
  li.textContent = "Added by JavaScript";
  document.getElementById("list").appendChild(li);
</script>

Output (after the script runs)

First
Added by JavaScript

Removing and replacing

element.remove() removes it from the page.
parent.prepend(el) adds at the start.
element.replaceWith(newEl) swaps one element for another.

A small to-do list

Example

<input id="task" type="text" placeholder="New task">
<button id="add" type="button">Add</button>
<ul id="tasks"></ul>

<script>
  const input = document.getElementById("task");
  const list = document.getElementById("tasks");

  document.getElementById("add").addEventListener("click", function () {
    const text = input.value.trim();
    if (text === "") { return; }

    const li = document.createElement("li");
    li.textContent = text;

    const del = document.createElement("button");
    del.type = "button";
    del.textContent = "Delete";
    del.addEventListener("click", function () { li.remove(); });

    li.append(" ", del);
    list.appendChild(li);
    input.value = "";
    input.focus();
  });
</script>

Output (run it in the editor)

The visitor’s text goes in with textContent, so any HTML they type is shown as plain text and cannot run.

Common mistakes

Using innerHTML with visitor input.
Writing background-color in style instead of backgroundColor.
Creating an element and forgetting to add it to the page.
Setting many inline styles instead of toggling a class.
Replacing innerHTML of a big container repeatedly, which removes event listeners inside it.

Exercise

Create a list item for each fruit in the array and add it to the list.

Show solution

<ul id="fruits"></ul>

<script>
  const fruits = ["Apple", "Banana", "Cherry"];
  const list = document.getElementById("fruits");

  fruits.forEach(function (fruit) {
    const li = document.createElement("li");
    li.textContent = fruit;
    list.appendChild(li);
  });
</script>

Knowledge check

1. Which property is the safe way to set text?

textContent

2. Which method adds or removes a class depending on its current state?

classList.toggle()

3. After createElement, what must you do to show the element?

Add it to the page, for example with appendChild.

Summary

Change text, attributes, and styles through element properties.
Prefer classList over many inline styles.
Create, add, and remove elements to build dynamic pages.