Modifying Element Content and Attributes

textContent

Gets or sets the text content of an element and all its descendants.

// Get the text content
const paragraph = document.getElementById('my-paragraph');
const currentText = paragraph.textContent;
console.log(currentText); // Shows all text, without HTML formatting

// Set the text content
paragraph.textContent = 'This is the new text content.';

// Any HTML tags will be treated as literal text, not parsed
paragraph.textContent = '<strong>Bold text</strong>';
// Result in browser: Bold text (as literal text)

Key characteristics:

• Treats HTML tags as literal text (not parsed)
• Returns all text content, even from hidden elements
• Removes all existing content and replaces it
• Secure against XSS attacks when used with user input

innerHTML

Gets or sets the HTML content inside an element.

// Get the HTML content
const container = document.getElementById('content-container');
const currentHTML = container.innerHTML;
console.log(currentHTML); // Shows HTML structure as a string

// Set HTML content
container.innerHTML = '<h2>New Heading</h2><p>New paragraph with <em>emphasis</em>.</p>';

// Can be used to add/modify complex content
container.innerHTML += '<ul><li>New item 1</li><li>New item 2</li></ul>';

Key characteristics:

• Parses HTML tags and renders them as HTML elements
• Completely replaces existing content
• Can be used to add complex HTML structures quickly
• Security risk: Vulnerable to XSS attacks with user input
• Performance impact: Parser must run to create new DOM elements

innerText

Gets or sets the visible text content of an element.

// Get the visible text
const header = document.getElementById('page-header');
const visibleText = header.innerText;
console.log(visibleText); // Only shows visible text content

// Set the text (similar to textContent)
header.innerText = 'New Header Text';

// HTML tags are not parsed
header.innerText = '<span>This is not rendered as HTML</span>';

Key characteristics:

• Only returns visible text (respects CSS display properties)
• Treats HTML tags as literal text (not parsed)
• Is aware of CSS styles and rendering (unlike textContent)
• May trigger reflow as it needs to compute styles

getAttribute() and setAttribute()

The standard method for working with all types of attributes:

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

// Get an attribute value
const href = link.getAttribute('href');
console.log(href); // e.g., "/products"

// Set an attribute value
link.setAttribute('href', '/new-destination');
link.setAttribute('target', '_blank');
link.setAttribute('data-category', 'navigation');

// Check if an attribute exists
if (link.hasAttribute('target')) {
    console.log('Link opens in a new tab');
}

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

Direct Property Access

Standard HTML attributes can often be accessed directly as properties:

const image = document.getElementById('hero-image');

// Get properties
console.log(image.src); // Full URL of the image
console.log(image.alt); // Alt text
console.log(image.width); // Width in pixels

// Set properties
image.src = '/images/new-hero.jpg';
image.alt = 'New hero image description';
image.width = 600;
image.height = 400;

Note: There are subtle differences between attributes and properties:

• Attributes are defined in the HTML
• Properties are the JavaScript representation of attributes
• Some properties have different names or formats than their corresponding attributes
• Property access generally has better performance than getAttribute/setAttribute

Working with Classes

While you can modify the class attribute directly, the classList property provides a more convenient interface:

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

// Add a class
card.classList.add('highlighted');

// Remove a class
card.classList.remove('inactive');

// Toggle a class (add if absent, remove if present)
card.classList.toggle('expanded');

// Check if an element has a class
if (card.classList.contains('editable')) {
    // Allow editing
}

// Replace one class with another
card.classList.replace('loading', 'loaded');

// Add multiple classes
card.classList.add('animate', 'fade-in', 'visible');

The className property can also be used, but it's less convenient for operations on individual classes:

// Get all classes as a space-separated string
console.log(card.className); // e.g., "card highlighted expanded"

// Replace all classes
card.className = 'card special-edition';

// Add a class (careful not to overwrite existing classes)
card.className += ' new-class';

Data Attributes

HTML5 introduced data-* attributes, which provide a clean way to store custom data. JavaScript offers the dataset property for easy access:

// HTML: <div id="product" data-id="1234" data-category="electronics" data-in-stock="true">...</div>

const product = document.getElementById('product');

// Read data attributes
console.log(product.dataset.id); // "1234"
console.log(product.dataset.category); // "electronics"
console.log(product.dataset.inStock); // "true" (notice camelCase conversion)

// Set data attributes
product.dataset.price = "499.99";
product.dataset.lastUpdated = Date.now();

// Check if a data attribute exists
if ('rating' in product.dataset) {
    // Use rating data
}

// Remove a data attribute
delete product.dataset.lastViewed;

Note: Data attributes provide a clean way to store application-specific data directly in HTML elements without using non-standard attributes.

Inline Styles with the style Property

The style property allows direct manipulation of an element's inline styles:

const box = document.getElementById('feature-box');

// Set individual style properties
box.style.backgroundColor = '#f0f0f0';
box.style.padding = '20px';
box.style.borderRadius = '8px';
box.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

// Note: CSS property names with hyphens become camelCase in JavaScript
// 'background-color' → 'backgroundColor'
// 'font-family' → 'fontFamily'

// Set multiple styles at once with cssText (overwrites all inline styles)
box.style.cssText = 'color: #333; font-size: 16px; line-height: 1.5; margin-bottom: 10px;';

// Read computed style (what's actually applied after all CSS rules)
const computedStyle = window.getComputedStyle(box);
console.log(computedStyle.width); // e.g., "300px"
console.log(computedStyle.display); // e.g., "block"

Important: The style property only accesses and modifies inline styles (as if set in the HTML style attribute). It doesn't reflect styles from CSS stylesheets.

Working with CSS Variables

CSS custom properties (variables) can be modified via JavaScript, affecting all elements that use them:

// CSS:
// :root {
//   --main-color: #3498db;
//   --accent-color: #e74c3c;
//   --text-size: 16px;
// }

// Get CSS variable value
const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--main-color').trim();
console.log(mainColor); // "#3498db"

// Set CSS variable at the document level
document.documentElement.style.setProperty('--main-color', '#2980b9');

// Set variable for a specific element and its children
const container = document.getElementById('theme-container');
container.style.setProperty('--accent-color', '#c0392b');

This approach is powerful for theme switching and dynamic styling that affects multiple elements consistently.