el.textContent = 'text';      // safe text content
el.innerHTML = '<b>html</b>'; // HTML (XSS risk!)
el.classList.add('active');
el.setAttribute('href', '/');

Deep Dive Course

Manipulating the DOM means reading and writing element properties. Use **textContent** (safe, no HTML) or **innerHTML** (parses HTML — XSS risk if from user input). Use **classList** methods (add, remove, toggle, contains) over `className` string manipulation. Use **style.property** for inline styles, but prefer CSS classes for maintainability.

1Understanding DOM Element Manipulation

Manipulating the DOM means reading and writing element properties. Use textContent (safe, no HTML) or innerHTML (parses HTML — XSS risk if from user input). Use classList methods (add, remove, toggle, contains) over className string manipulation. Use style.property for inline styles, but prefer CSS classes for maintainability.

💡

Never use innerHTML with unsupported user input — it creates XSS vulnerabilities. Use textContent for user-generated content.

editor.html

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

// Content
el.textContent = 'Safe text content';
// el.innerHTML = '<b>Bold</b>'; // OK for trusted content

// Classes
el.classList.add('active');
el.classList.remove('loading');
el.classList.toggle('expanded');
console.log(el.classList.contains('active')); // true

localhost:3000

2Practical Example

Here is a real-world application of DOM Element Manipulation showing how it is used in production JavaScript code.

editor.html

// Attributes
const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');
console.log(link.getAttribute('href')); // https://example.com

// Data attributes
const btn = document.querySelector('[data-id]');
console.log(btn.dataset.id); // '42'

localhost:3000

3Best Practices

Follow these guidelines when working with DOM Element Manipulation:

1. Use textContent instead of innerHTML for plain text

2. Use classList.toggle() for on/off states

3. Batch style changes by adding/removing CSS classes

⚠️

Tip: Never use innerHTML with unsupported user input — it creates XSS vulnerabilities. Use textContent for user-generated content.

editor.html

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

// Content
el.textContent = 'Safe text content';
// el.innerHTML = '<b>Bold</b>'; // OK for trusted content

// Classes
el.classList.add('active');
el.classList.remove('loading');
el.classList.toggle('expanded');
console.log(el.classList.contains('active')); // true

localhost:3000

Examples

Example 01Basic Usage

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

// Content
el.textContent = 'Safe text content';
// el.innerHTML = '<b>Bold</b>'; // OK for trusted content

// Classes
el.classList.add('active');
el.classList.remove('loading');
el.classList.toggle('expanded');
console.log(el.classList.contains('active')); // true

Example 02Advanced Example

// Attributes
const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');
console.log(link.getAttribute('href')); // https://example.com

// Data attributes
const btn = document.querySelector('[data-id]');
console.log(btn.dataset.id); // '42'

Best Practices

Use textContent instead of innerHTML for plain text
Use classList.toggle() for on/off states
Batch style changes by adding/removing CSS classes

Interview Question

What is the XSS risk with innerHTML?▼

Hint: Script injection through HTML parsing.

innerHTML parses the string as HTML and executes any embedded scripts. If you set innerHTML to user-provided content like '<img src=x onerror=alert(1)>', the script runs. Always use textContent for user data, or sanitize with DOMPurify before using innerHTML.

Exercises

MediumPractice using DOM Element Manipulation in a real scenario.

View Solution

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

// Content
el.textContent = 'Safe text content';
// el.innerHTML = '<b>Bold</b>'; // OK for trusted content

// Classes
el.classList.add('active');
el.classList.remove('loading');
el.classList.toggle('expanded');
console.log(el.classList.contains('active')); // true

Frequently Asked Questions

What is the XSS risk with innerHTML?▼

innerHTML parses the string as HTML and executes any embedded scripts. If you set innerHTML to user-provided content like '', the script runs. Always use textContent for user data, or sanitize with DOMPurify before using innerHTML.

Related Functions

Elements-CreationSelection-MethodsEventsModify-Attributes