✏️ Modifying Element Content and Attributes

Updating Instead of Rebuilding

In the previous lesson you built elements from scratch. But once content is on the page, throwing it away and recreating it is wasteful and buggy — it discards event listeners, loses scroll position, and makes the screen flicker. The professional move is to reach into an existing element and change only what needs changing.

An element gives you four kinds of things you can modify, and it helps to keep them straight:

💡 Analogy — renovating, not rebuilding. Changing content is redecorating a room; changing attributes is swapping a window or door; toggling classes is switching the whole room's theme. You renovate the one room that needs it — you don't demolish the house.

Modifying Content

Three properties change what's inside an element, and they behave differently enough that picking the wrong one is a real bug source.

textContent — plain text, fast and safe

const p = document.getElementById('status');

const current = p.textContent;      // reads all text, including hidden
p.textContent = 'Saved!';           // replaces content; HTML is NOT parsed
p.textContent = '<b>hi</b>';        // shows the literal characters <b>hi</b>

Because it never parses HTML, textContent is the fastest option and is safe against XSS — the default choice for text.

innerHTML — parses markup

const box = document.getElementById('content');

box.innerHTML = '<h2>New heading</h2><p>With <em>emphasis</em>.</p>';

Powerful for injecting a chunk of structure at once, but it re-parses and rebuilds everything inside the element — and is dangerous with untrusted input.

innerText — visible text only

const header = document.getElementById('page-header');
const visible = header.innerText;   // respects CSS: skips display:none text

innerText reflects what's actually rendered, so it ignores hidden elements and collapses whitespace. That awareness of layout means reading it can force the browser to compute styles (a reflow), making it slower than textContent.

element.innerHTML = userInput;   // ❌ a <script> or onerror can run
element.textContent = userInput; // ✅ shown as literal text

Modifying Attributes

Attributes are the extra information on a tag — id, href, src, disabled, and so on. You have two ways to touch them.

getAttribute / setAttribute — works for anything

const link = document.getElementById('main-link');

link.getAttribute('href');                 // read
link.setAttribute('href', '/new-page');    // write
link.setAttribute('target', '_blank');
link.hasAttribute('target');               // true
link.removeAttribute('target');            // delete

Direct property access — shorter, often faster

const img = document.getElementById('hero');

img.src = '/images/new-hero.jpg';   // same as setAttribute('src', ...)
img.alt = 'A new hero image';
img.width = 600;
img.hidden = true;                  // boolean attributes are just true/false

Attributes vs. Properties

This distinction trips up nearly everyone at first, so it's worth slowing down. The HTML attribute is the value written in the markup — think of it as the initial, default state. The DOM property is the live JavaScript value that reflects the current state, including anything the user has done since.

// <input id="name" value="Initial">   ...then the user types "Ray"
const input = document.getElementById('name');

input.value;                    // "Ray"        (property = current state)
input.getAttribute('value');    // "Initial"    (attribute = starting state)

// Checkboxes work the same way:
// <input type="checkbox" checked>   ...then the user unticks it
checkbox.checked;               // false        (property = live state)
checkbox.getAttribute('checked'); // "" or "checked" (attribute = initial)

Classes & Data Attributes

The classList API

You can edit the className string directly, but classList gives you clean, targeted methods that don't clobber other classes:

const card = document.querySelector('.card');

card.classList.add('highlighted');          // add one…
card.classList.add('animate', 'fade-in');   // …or several
card.classList.remove('inactive');
card.classList.toggle('expanded');          // add if absent, remove if present
card.classList.toggle('selected', isOn);    // force state with a boolean
card.classList.replace('loading', 'loaded');
card.classList.contains('editable');        // → true / false

Data attributes and dataset

Custom data-* attributes let you attach application data to an element without inventing non-standard attributes. The dataset property reads and writes them, converting kebab-case to camelCase:

// <div id="product" data-id="1234" data-in-stock="true"></div>
const product = document.getElementById('product');

product.dataset.id;         // "1234"
product.dataset.inStock;    // "true"  (data-in-stock → inStock)

product.dataset.price = '499.99';   // adds data-price="499.99"
delete product.dataset.id;          // removes data-id

Common Update Patterns

These small recipes combine the tools above into the updates you'll write constantly.

A live counter with a milestone highlight

const counterEl = document.getElementById('counter');   // cache the reference
let count = 0;

function increment() {
  count++;
  counterEl.textContent = count;

  if (count % 10 === 0) {
    counterEl.classList.add('milestone');
    setTimeout(() => counterEl.classList.remove('milestone'), 1500);
  }
}

Rendering fetched data (safely)

async function showWeather() {
  const panel = document.getElementById('weather');
  panel.classList.add('loading');

  try {
    const res  = await fetch('/api/weather');
    const data = await res.json();

    // Build with textContent, not innerHTML, since values come from outside:
    panel.querySelector('.city').textContent = data.city;
    panel.querySelector('.temp').textContent = `${data.temp}°`;
    panel.dataset.condition = data.condition;   // drive CSS via a data attribute
  } catch {
    panel.querySelector('.city').textContent = 'Could not load weather';
  } finally {
    panel.classList.remove('loading');
  }
}

Accessible inline validation

function validateEmail(input) {
  const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value);
  const msg = document.getElementById(input.id + '-msg');

  input.classList.toggle('valid', ok);
  input.classList.toggle('invalid', !ok);
  input.setAttribute('aria-invalid', String(!ok));   // announce to screen readers
  msg.textContent = ok ? 'Looks good!' : 'Enter a valid email address';
  return ok;
}

Hands-on Exercise

<textarea id="bio" maxlength="150"></textarea>
<p id="count">0 / 150</p>

<button id="like" data-liked="false" aria-pressed="false">♡ Like</button>

const bio   = document.getElementById('bio');
const count = document.getElementById('count');
const like  = document.getElementById('like');
const MAX   = 150;

bio.addEventListener('input', () => {
  const used = bio.value.length;
  count.textContent = `${used} / ${MAX}`;
  count.classList.toggle('warn', MAX - used <= 20);
});

like.addEventListener('click', () => {
  const liked = like.dataset.liked !== 'true';   // next state
  like.dataset.liked = String(liked);
  like.setAttribute('aria-pressed', String(liked));
  like.classList.toggle('liked', liked);
  like.textContent = liked ? '♥ Liked' : '♡ Like';
});

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Element.innerHTML
• MDN — Element.classList
• MDN — Using data attributes
• DOMPurify — sanitizing HTML before innerHTML

🚀 What's Next?

You've been toggling classes and setting the odd inline style. Next we go deeper into the visual layer — the style property, class-driven states, and CSS variables — in Dynamic Styling and Classes.