Updating Elements

There are several ways to modify an element's content.

textContent vs innerHTML vs innerText

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

// textContent - gets/sets plain text
// - Fastest
// - Includes hidden elements
// - Doesn't parse HTML
element.textContent = 'Hello <b>World</b>'; // Shows HTML as text
console.log(element.textContent); // 'Hello <b>World</b>'

// innerHTML - gets/sets HTML
// - Slower (parses HTML)
// - XSS risk with user input
element.innerHTML = 'Hello <b>World</b>'; // Renders bold
console.log(element.innerHTML); // 'Hello <b>World</b>'

// innerText - gets/sets visible text
// - Slower (triggers layout reflow)
// - Only returns visible text
element.innerText = 'Hello World';
console.log(element.innerText); // 'Hello World'

Comparison Table

Method	Parses HTML	Includes Hidden	Performance
textContent	No	Yes	Fast
innerHTML	Yes	Yes	Medium
innerText	No	No	Slow

Practical Example

function updateStatus(message, type) {
  const status = document.getElementById('status');
  
  // Use textContent for safety
  status.textContent = message;
  
  // Use innerHTML for formatted content (if trusted)
  status.innerHTML = `<span class="${type}">${message}</span>`;
}

// For user input, always use textContent
function displayUserInput(text) {
  const display = document.getElementById('user-display');
  display.textContent = text; // Safe
}

Elements have attributes like class, id, src, href, etc.

Setting Attributes

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

// setAttribute - works for any attribute
img.setAttribute('src', 'new-image.jpg');
img.setAttribute('alt', 'New image');
img.setAttribute('data-id', '123');

// Direct property - only for standard attributes
img.src = 'new-image.jpg';
img.alt = 'New image';

// Class (special handling)
img.className = 'new-class'; // Replaces all classes
img.classList.add('another'); // Add class
img.classList.remove('old'); // Remove class
img.classList.toggle('active'); // Toggle

Getting Attributes

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

// getAttribute
const href = link.getAttribute('href');
const dataId = link.getAttribute('data-id');

// Direct property
const href2 = link.href; // May differ from getAttribute!

// Check if attribute exists
const hasTarget = link.hasAttribute('target');

Removing Attributes

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

// Remove class
link.classList.remove('disabled');

// Remove data attribute
link.removeAttribute('data-id');

Dataset (data-* attributes)

// HTML: <div data-user-id="123" data-role="admin">User</div>

const div = document.querySelector('[data-user-id]');

// Read
console.log(div.dataset.userId);  // '123' (camelCase)
console.log(div.dataset.role);    // 'admin'

// Write
div.dataset.status = 'active'; // Adds data-status="active"

// Remove
delete div.dataset.status;

// All data attributes
console.log(Object.entries(div.dataset));
// [['userId', '123'], ['role', 'admin']]

You can modify element styles through JavaScript.

Inline Styles

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

// Set single property
element.style.color = 'red';
element.style.backgroundColor = 'blue';
element.style.fontSize = '16px';

// Set multiple properties
element.style.cssText = 'color: red; background: blue; font-size: 16px;';

// Read style (only inline)
console.log(element.style.color); // 'red'
console.log(element.style.backgroundColor); // 'blue'

Computed Styles

// Get computed (final) styles
const computed = window.getComputedStyle(element);
console.log(computed.color);          // 'rgb(255, 0, 0)'
console.log(computed.fontSize);       // '16px'
console.log(computed.display);        // 'block'

// Check if element is visible
const isHidden = computed.display === 'none' || 
                 computed.visibility === 'hidden';

CSS Classes (Recommended)

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

// Add class
element.classList.add('active');
element.classList.add('highlight', 'selected');

// Remove class
element.classList.remove('active');

// Toggle class
element.classList.toggle('active');
element.classList.toggle('active', isActive); // Force state

// Check class
if (element.classList.contains('active')) {
  // Element has 'active' class
}

// Replace class
element.classList.replace('old-class', 'new-class');

CSS Custom Properties (Variables)

// Set CSS variable
element.style.setProperty('--primary-color', '#3498db');

// Read CSS variable
const primary = getComputedStyle(element)
  .getPropertyValue('--primary-color');

Best Practice: Use CSS Classes

// BAD: Inline styles
element.style.color = 'red';
element.style.fontWeight = 'bold';
element.style.padding = '10px';

// GOOD: Toggle classes
element.classList.add('error-state');

/* CSS */
.error-state {
  color: red;
  font-weight: bold;
  padding: 10px;
}