Modifying elements

Changing what’s on the page

Once you’ve selected an element, you can change anything about it — its text, HTML, styles, classes, and attributes. This is how vanilla JavaScript makes pages dynamic.

Changing text content

textContent — plain text

const heading = document.querySelector("h1");

// Read
console.log(heading.textContent); // "Welcome"

// Write
heading.textContent = "Hello, Sarah!";

textContent sets or gets the plain text of an element. It’s safe — any HTML in the string is displayed as text, not rendered.

// HTML is escaped — shows the literal tags
heading.textContent = "<em>Hello</em>"; // Displays: <em>Hello</em>

innerHTML — HTML content

const container = document.querySelector(".user-info");

// Read — includes HTML tags
console.log(container.innerHTML); // "<strong>Sarah</strong> — Admin"

// Write — HTML is parsed and rendered
container.innerHTML = "<strong>Sarah Chen</strong> — <em>Editor</em>";

innerHTML parses and renders HTML. Use it when you need to insert structured content.

Never set innerHTML with user input. It creates a cross-site scripting (XSS) vulnerability. If a user types <script>alert('hacked')</script>, it will execute. Use textContent for user-provided data.

When to use each

Method	Use case	Safe from XSS?
`textContent`	Setting plain text	Yes
`innerHTML`	Setting HTML structure	No — sanitize first
`innerText`	Like `textContent` but respects CSS (slower)	Yes

Default to textContent. Only use innerHTML when you specifically need to set HTML, and never with user input.

Changing styles

Inline styles

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

// Set individual properties (camelCase, not kebab-case)
card.style.backgroundColor = "#f0f9ff";
card.style.padding = "16px";
card.style.borderRadius = "8px";
card.style.display = "none"; // Hide the element

// Read a style
console.log(card.style.backgroundColor); // "rgb(240, 249, 255)"

CSS property names use camelCase in JavaScript:

CSS	JavaScript
`background-color`	`backgroundColor`
`font-size`	`fontSize`
`border-radius`	`borderRadius`
`z-index`	`zIndex`
`margin-top`	`marginTop`

Removing an inline style

// Set to empty string to remove
card.style.backgroundColor = "";

// Or remove all inline styles
card.removeAttribute("style");

element.style only reads and sets inline styles. It won’t show styles from your CSS files. To read the computed (final) style, use getComputedStyle(element).

Adding and removing classes

This is the preferred way to change styles. Instead of setting individual CSS properties, toggle classes that are defined in your stylesheet.

classList API

const button = document.querySelector(".btn");

// Add a class
button.classList.add("active");
// <button class="btn active">

// Remove a class
button.classList.remove("active");
// <button class="btn">

// Toggle — add if missing, remove if present
button.classList.toggle("active");

// Check if a class exists
if (button.classList.contains("active")) {
  console.log("Button is active");
}

// Add multiple classes
button.classList.add("primary", "large");

// Remove multiple classes
button.classList.remove("primary", "large");

Practical examples

// Show/hide an element
const modal = document.querySelector(".modal");
modal.classList.toggle("hidden");

// Highlight the active navigation link
const navLinks = document.querySelectorAll(".nav-link");
navLinks.forEach(link => link.classList.remove("active"));
clickedLink.classList.add("active");

// Dark mode toggle
document.body.classList.toggle("dark-mode");

/* Your CSS file */
.hidden { display: none; }
.active { color: #3b82f6; font-weight: bold; }
.dark-mode { background: #1a1a2e; color: #eee; }

Prefer classList over element.style for most visual changes. CSS classes are reusable, easier to maintain, and keep your JavaScript focused on logic rather than styling.

Changing attributes

setAttribute / getAttribute

const link = document.querySelector("a.docs-link");

// Read an attribute
console.log(link.getAttribute("href")); // "/docs"

// Set an attribute
link.setAttribute("href", "/new-docs");
link.setAttribute("target", "_blank");

// Remove an attribute
link.removeAttribute("target");

// Check if an attribute exists
link.hasAttribute("target"); // false

Direct property access

Most common attributes have matching properties:

const img = document.querySelector("img.avatar");

// These work the same as setAttribute/getAttribute
img.src = "/images/sarah.jpg";
img.alt = "Sarah Chen's avatar";
img.width = 64;

const input = document.querySelector("input.email");
input.value = "sarah@example.com";
input.placeholder = "Enter your email";
input.disabled = true;
input.required = true;

data attributes

Custom data-* attributes are accessed through the dataset property:

// HTML: <div data-user-id="42" data-role="admin">
const card = document.querySelector(".user-card");

// Read — kebab-case becomes camelCase
console.log(card.dataset.userId); // "42"
console.log(card.dataset.role);   // "admin"

// Write
card.dataset.status = "active";
// HTML becomes: <div data-user-id="42" data-role="admin" data-status="active">

data-* attributes are always strings. If you store a number, you’ll need to convert it: Number(card.dataset.userId).

Showing and hiding elements

Three common patterns:

const element = document.querySelector(".notification");

// 1. CSS class (preferred)
element.classList.toggle("hidden"); // Uses .hidden { display: none }

// 2. Style property
element.style.display = "none";  // Hide
element.style.display = "";      // Show (revert to CSS default)

// 3. Hidden attribute
element.hidden = true;  // Hide
element.hidden = false; // Show

The CSS class approach is cleanest. Define a .hidden class in CSS and toggle it with classList.toggle("hidden"). This keeps your styling in CSS and your logic in JavaScript.

What’s next?

You can modify existing elements. Now let’s learn how to create new elements from scratch and add them to the page.

Creating elements

Dynamically add new HTML elements to the page

Understanding the DOM

DOM manipulation

Events

Browser APIs

Changing what’s on the page

Changing text content

textContent — plain text

innerHTML — HTML content

When to use each

Changing styles

Inline styles

Removing an inline style

Adding and removing classes

classList API

Practical examples

Changing attributes

setAttribute / getAttribute

Direct property access

data attributes

Showing and hiding elements

What’s next?

Creating elements

​Changing what’s on the page

​Changing text content

​textContent — plain text

​innerHTML — HTML content

​When to use each

​Changing styles

​Inline styles

​Removing an inline style

​Adding and removing classes

​classList API

​Practical examples

​Changing attributes

​setAttribute / getAttribute

​Direct property access

​data attributes

​Showing and hiding elements

​What’s next?

Creating elements

Changing what’s on the page

Changing text content

textContent — plain text

innerHTML — HTML content

When to use each

Changing styles

Inline styles

Removing an inline style

Adding and removing classes

classList API

Practical examples

Changing attributes

setAttribute / getAttribute

Direct property access

data attributes

Showing and hiding elements

What’s next?