0Pricing
Frontend Academy · Lesson

Changing Content: textContent innerHTML classList

Read and update element text content, inject HTML, and toggle, add, and remove CSS classes programmatically.

Changing Content: textContent innerHTML classList is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Reading and Writing textContent

element.textContent gets or sets the plain text content of an element, including all descendants. It's safe — it never parses HTML, so setting it with user input doesn't create XSS vulnerabilities.

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — Use With Caution

element.innerHTML gets or sets the HTML markup inside an element. Convenient, but dangerous with user input — it parses HTML and can execute scripts (XSS). Never set innerHTML with unsanitised user data.

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText vs textContent

innerText returns only visible text (respects CSS display:none) and triggers a layout. textContent returns all text including hidden and is faster. Prefer textContent unless you specifically need the visible-text behaviour.

classList — Adding and Removing Classes

element.classList provides methods to modify CSS classes without touching the full className string. add(), remove(), toggle(), contains(), replace().

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

toggle with Force Parameter

classList.toggle('class', condition) adds the class when condition is truthy, removes it when falsy. Clean way to sync a class to a boolean state.

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

Reading and Setting Attributes

element.getAttribute('attr') reads any attribute. element.setAttribute('attr', value) sets it. element.removeAttribute('attr') removes it. element.hasAttribute('attr') checks existence.

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

data-* Attributes

Custom data-* attributes store extra data on elements without affecting the DOM. Access them via element.dataset in camelCase.

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

Style Property

element.style.propertyName sets inline styles. Use camelCase for hyphenated properties. Prefer toggling CSS classes over setting inline styles — classes keep styles in CSS files where they belong.

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

Reading Computed Styles

getComputedStyle(element) returns the actual applied styles after the cascade — not just inline styles. Use it to read styles set by CSS classes or the browser default.

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

Modifying the title and meta Tags

The document title (browser tab) can be changed any time with document.title = 'New Title'. For SPAs this creates a better user experience when navigating between views.

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) smoothly scrolls the element into view. Perfect for scroll-to-section navigation and highlighting validation errors in forms.

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

Quick Check

Which property should you use to safely display user-provided text in the DOM without XSS risk?

Recap: Modifying the DOM

textContent safely sets plain text. innerHTML sets HTML (dangerous with user input). classList.add/remove/toggle handles CSS classes cleanly. setAttribute/dataset manage HTML attributes. Prefer class toggling over inline styles. getComputedStyle reads final applied styles.

Frequently asked questions

Is the “Changing Content: textContent innerHTML classList” lesson free?

Yes — the full text of “Changing Content: textContent innerHTML classList” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Changing Content: textContent innerHTML classList”?

Read and update element text content, inject HTML, and toggle, add, and remove CSS classes programmatically. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Changing Content: textContent innerHTML classList” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. querySelector and querySelectorAll
  2. addEventListener and Event Object
  3. Changing Content: textContent innerHTML classList
  4. Creating and Appending Elements
← Back to Frontend Academy