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

More JavaScript tasks

Back to the full DOM Manipulation cheat sheet