Skip to content
Laviyx Learn

Try

JavaScript course menu

Changing the DOM: textContent, innerHTML, Attributes, classList and Styles

Learn to change web pages with JavaScript: textContent vs innerHTML (and XSS risks), reading and setting attributes, dataset for data attributes, adding, removing and toggling classes with classList, inline styles, and showing and hiding elements.

Intermediate7 min readUpdated
On this page

Once you have selected an element, you can change its text, its attributes, its classes and its styles. The browser updates the page immediately.

Changing text: textContent#

HTML
<p id="status">Loading...</p>
<button id="done">Finish loading</button>
JavaScript
document.querySelector("#done").addEventListener("click", () => {
  document.querySelector("#status").textContent = "All 12 lessons loaded <b>successfully</b>";
});
Result

textContent sets plain text. The <b> in the example appears literally, as text, rather than becoming bold. That is exactly what you want for any text that comes from users or other outside sources.

Changing HTML: innerHTML#

innerHTML reads and sets the HTML markup inside an element:

HTML
<div id="box"></div>
JavaScript
document.querySelector("#box").innerHTML = "<strong>Bold</strong> and <em>italic</em>";
Result

Attributes#

Most standard attributes are available as properties with the same name:

HTML
<a id="link" href="https://example.com">Example</a>
<img id="photo" src="/lesson-assets/landscape-300.svg" alt="Hills" width="150">
<input id="email" type="email" placeholder="Email">
<p id="out"></p>
JavaScript
const link = document.querySelector("#link");
const photo = document.querySelector("#photo");
const email = document.querySelector("#email");

link.href = "https://developer.mozilla.org";
link.textContent = "MDN";
photo.alt = "Green hills under a blue sky";
email.disabled = true;

document.querySelector("#out").textContent =
  `getAttribute: ${link.getAttribute("href")} | has alt: ${photo.hasAttribute("alt")}`;
Result
MethodDoes
el.getAttribute("name")Reads an attribute as written in the HTML
el.setAttribute("name", "value")Sets an attribute
el.removeAttribute("name")Removes it
el.hasAttribute("name")Checks for it
el.toggleAttribute("name")Adds or removes a boolean attribute such as hidden

Use properties (el.disabled = true, input.value) for state, and the attribute methods for custom attributes such as ARIA (el.setAttribute("aria-expanded", "true")).

data attributes: dataset#

data-* attributes are available through element.dataset, with names converted to camelCase:

HTML
<button id="buy" data-product-id="42" data-price="499">Buy</button>
<p id="out"></p>
JavaScript
const button = document.querySelector("#buy");
const { productId, price } = button.dataset;
document.querySelector("#out").textContent = `Product ${productId} costs ₹${price}`;
button.dataset.clicked = "no";   // adds data-clicked="no"
Result

Classes: classList#

Changing classes (and letting CSS handle the look) is better than setting many styles from JavaScript:

HTML
<style>
  .card { padding: 12px; border: 2px solid #ccc; border-radius: 8px; }
  .card.selected { border-color: #2f5fe0; background: #eef3ff; }
  .hidden { display: none; }
</style>
<div class="card" id="card">Click "Select" to toggle my class.</div>
<p>
  <button id="select">Select</button>
  <button id="hide">Hide / show</button>
</p>
JavaScript
const card = document.querySelector("#card");
document.querySelector("#select").addEventListener("click", () => {
  card.classList.toggle("selected");
});
document.querySelector("#hide").addEventListener("click", () => {
  card.classList.toggle("hidden");
});
Result
MethodDoes
classList.add("a", "b")Adds classes
classList.remove("a")Removes a class
classList.toggle("a")Adds it if missing, removes it if present; returns the new state
classList.toggle("a", condition)Adds when condition is true, removes when false
classList.contains("a")Checks for a class
classList.replace("a", "b")Swaps one class for another

Inline styles#

element.style sets inline styles. CSS property names become camelCase:

HTML
<div id="bar" style="height: 20px; background: #2f5fe0; width: 10%"></div>
<button id="grow">Grow</button>
JavaScript
const bar = document.querySelector("#bar");
let width = 10;
document.querySelector("#grow").addEventListener("click", () => {
  width = Math.min(width + 15, 100);
  bar.style.width = `${width}%`;
  bar.style.backgroundColor = width === 100 ? "seagreen" : "#2f5fe0";
});
Result

Use style for values calculated at runtime, such as a progress bar's width or a position. For fixed looks, use classes. To read the final computed style (including CSS rules), use getComputedStyle(element).color.

Showing and hiding#

Three common ways:

  • element.hidden = true (the HTML hidden attribute),
  • toggling a class such as .hidden { display: none; },
  • element.style.display = "none".

Remember to update ARIA attributes such as aria-expanded on the button that controls the content (ARIA Basics).

Practice#

Practice exercise

Build a "Read more" toggle: a paragraph with extra text hidden at first, and a button that shows it, changes its own label to "Read less", and updates aria-expanded. Clicking again reverses everything.

Show solution
HTML
<p>JavaScript runs in every browser.
  <span id="more" hidden>It also runs on servers with Node.js and in mobile apps.</span>
</p>
<button id="toggle" aria-expanded="false" aria-controls="more">Read more</button>
JavaScript
const more = document.querySelector("#more");
const toggle = document.querySelector("#toggle");

toggle.addEventListener("click", () => {
  const isOpen = more.hidden;      // hidden now means it is about to open
  more.hidden = !isOpen;
  toggle.textContent = isOpen ? "Read less" : "Read more";
  toggle.setAttribute("aria-expanded", String(isOpen));
});
Result

Key takeaway#

Finished this lesson?

Related lessons

JavaScriptSelecting DOM Elements: querySelector, querySelectorAll and getElementByIdLearn how to find elements in JavaScript: querySelector and querySelectorAll with CSS selectors, getElementById, NodeLists and looping over them, searching inside an element, closest() and matches(), and navigating parents, children and siblings.Intermediate6 min readJavaScriptCreating and Removing DOM Elements: createElement, append, remove and TemplatesLearn to add and remove elements with JavaScript: createElement, setting text and attributes, append, prepend, before, after and insertAdjacentHTML, removing elements, rendering lists from arrays, DocumentFragment, and the template element.Intermediate8 min readJavaScriptJavaScript Events: addEventListener, the Event Object and Common EventsLearn JavaScript events: listening with addEventListener, the event object and event.target, common mouse, keyboard, input and page events, preventDefault, removing listeners, once and passive options, and why to avoid inline onclick attributes.Intermediate7 min read