Text & HTML Content in JavaScript

From the DOM Manipulation cheat sheet · Modifying Elements · verified Jul 2026

Text & HTML Content

Modify the text and HTML content of elements safely

javascript
// Text content (safe, escapes HTML)
element.textContent = 'Hello World'
const text = element.textContent

// Inner text (respects styling)
element.innerText = 'Visible text only'
const visible = element.innerText

// HTML content (parses HTML)
element.innerHTML = '<strong>Bold text</strong>'
const html = element.innerHTML

// Outer HTML (includes element itself)
element.outerHTML = '<div>Replacement</div>'
💡 textContent is safe from XSS attacks
⚠️ innerHTML removes existing event listeners
📌 innerText respects CSS visibility
✅ Always use textContent for user input

Continue with DOM Manipulation

Save the full cheat sheet or work through every related task.

More JavaScript tasks

Back to the full DOM Manipulation cheat sheet