🎨 Modifying Elements and Attributes

What You Can Change

Think of a selected element as an object with a handful of "dials" you can turn. Change its content and the words on screen update. Change its style or classes and it recolors, resizes, or hides. Change its attributes and links point elsewhere, inputs accept new values, images load new sources. Every dial is a plain JavaScript property or method.

The rest of this lesson walks each dial in turn, always favoring the safe, maintainable option over the quick-but-risky one.

Changing Text & HTML

There are three properties for reading and writing what's inside an element, and choosing the right one prevents both bugs and security holes.

const el = document.querySelector('.content');

// textContent — sets/reads PLAIN TEXT. Fast and safe.
el.textContent = 'Simple text content';

// innerHTML — sets/reads HTML and PARSES it into real elements.
el.innerHTML = '<strong>Bold</strong> and <em>italic</em>';

// innerText — like textContent but respects styling (skips hidden text).
el.innerText = 'Only what the user can actually see';

// The three read differently on the same content:
el.innerHTML = '<p style="display:none">Hidden</p><p>Visible</p>';
console.log(el.textContent);   // "HiddenVisible"  — all text
console.log(el.innerText);     // "Visible"        — visible only
console.log(el.innerHTML);     // the full markup string

The innerHTML Security Trap

The convenience of innerHTML hides a serious danger. If you drop untrusted input — anything a user typed or an API returned — into innerHTML, you may be handing an attacker the keys to your page. This is a cross-site scripting (XSS) vulnerability.

// ❌ DANGEROUS — this markup RUNS:
const userInput = '<img src="x" onerror="alert(\'hacked!\')">';
el.innerHTML = userInput;   // the onerror handler fires immediately

// ✅ SAFE — the same string is shown as literal text, never executed:
el.textContent = userInput; // displays <img src="x" …> verbatim

Changing Styles

The style property writes inline styles directly onto the element. CSS property names become camelCase (background-color → backgroundColor).

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

// One property at a time:
box.style.backgroundColor = 'royalblue';
box.style.color = 'white';
box.style.fontSize = '16px';       // note camelCase for font-size
box.style.borderRadius = '8px';

// Several at once with Object.assign:
Object.assign(box.style, {
    padding: '15px',
    transition: 'all 0.3s ease'
});

// CSS custom properties use setProperty (they keep their dashes):
box.style.setProperty('--brand', '#007bff');

// Remove an inline style by setting it to an empty string:
box.style.backgroundColor = '';

// Read the FINAL, computed value (after stylesheets apply):
const computed = getComputedStyle(box);
console.log(computed.fontSize);    // e.g. "16px"

Working with classList

The classList API is the clean, modern way to drive styling from JavaScript: keep the actual CSS in your stylesheet, and just switch classes on and off.

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

// Add / remove (one or many):
el.classList.add('active');
el.classList.add('highlighted', 'featured');
el.classList.remove('featured');

// Toggle — add if absent, remove if present:
el.classList.toggle('collapsed');

// Toggle with a condition — force it on or off:
const shouldHighlight = true;
el.classList.toggle('highlighted', shouldHighlight);

// Test membership:
if (el.classList.contains('active')) {
    console.log('the card is active');
}

// Swap one class for another in a single call:
el.classList.replace('old-theme', 'new-theme');

Attributes & Properties

HTML attributes — href, src, type, disabled, and the rest — can be read and written two ways: the generic attribute methods, or direct property access.

const link = document.querySelector('a');
const input = document.querySelector('input');

// Generic attribute methods (work for ANY attribute):
link.getAttribute('href');                 // read
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener');
link.removeAttribute('target');            // remove
input.hasAttribute('required');            // test

// Direct property access (for standard attributes) is shorter:
input.value = 'New value';
input.type = 'password';
link.href = 'https://newsite.com';

// Boolean attributes are cleanest as properties:
input.disabled = true;   // adds the attribute
input.disabled = false;  // removes it

Data Attributes

Need to attach your own custom data to an element — a record id, a config flag, a state — without inventing invalid attributes? That's what data-* attributes are for, and the dataset property makes them effortless.

// HTML: <div class="user-card" data-user-id="12345" data-is-active="true">

const el = document.querySelector('.user-card');

// Read: data-user-id  →  dataset.userId  (kebab-case → camelCase)
console.log(el.dataset.userId);     // "12345"
console.log(el.dataset.isActive);   // "true"  (always a STRING)

// Write: dataset.lastLogin  →  data-last-login in the HTML
el.dataset.lastLogin = '2026-07-31';
el.dataset.userRole = 'admin';

// Everything comes back as a string — convert as needed:
const id = Number(el.dataset.userId);          // 12345 (number)
const active = el.dataset.isActive === 'true';  // true (boolean)

// Handy for reading component config straight off an element:
function readConfig(element) {
    return {
        speed: parseInt(element.dataset.animationSpeed) || 300,
        theme: element.dataset.theme || 'light',
        autoplay: element.dataset.autoplay === 'true'
    };
}

el.dataset.userId          → "12345"   (string)
Number(el.dataset.userId)  → 12345     (number)
el.dataset.isActive        → "true"    (string, not boolean!)

Practice & Quiz

function setStatus(selector, message, type) {
    // TODO: find the element; if missing, return false
    // set its text safely; set class to `status status-${type}`
    // return true on success
}
setStatus('.status', 'Saved!', 'success');

function setStatus(selector, message, type) {
    const el = document.querySelector(selector);
    if (!el) return false;

    el.textContent = message;                // safe — no HTML parsing
    el.className = `status status-${type}`;  // one clear status class set
    return true;
}

function getWidgetConfig() {
    const el = document.querySelector('.widget');
    if (!el) return null;
    return {
        refresh: Number(el.dataset.refresh),      // "5000" → 5000
        open: el.dataset.open === 'true'          // "true" → true
    };
}
console.log(getWidgetConfig());   // { refresh: 5000, open: true }

Best Practices & Pitfalls

✅ Do

• Default to textContent; reserve innerHTML for trusted, HTML-shaped content
• Drive styling with classList and keep the actual rules in CSS
• Use dataset for custom data, and convert its string values to the type you need
• Cache the element reference and reuse it instead of re-querying
• Check the element exists before touching its properties

❌ Don't

• Put untrusted user input into innerHTML — that's the classic XSS hole
• Reach for el.className = '…' when you only mean to change one class
• Treat dataset values as numbers or booleans without converting
• Scatter dozens of inline .style assignments where a single class would do

// ❌ interleaving reads and writes forces repeated layout recalcs
box.style.width = '100px';
console.log(box.offsetWidth);   // forces a reflow
box.style.height = '100px';
console.log(box.offsetHeight);  // forces another

// ✅ prefer a class, or write all style changes together
box.classList.add('sized');     // one rule, one reflow

Summary

📚 Additional Resources

• MDN — Element.classList
• MDN — Node.textContent
• MDN — HTMLElement.dataset

🚀 What's Next?

You can now change any element that already exists. Next you'll conjure brand-new ones out of thin air and tear old ones down: Creating and Removing Elements — createElement, insertion methods, document fragments, and clean removal.