What's the difference between innerText and innerHTML?

innerText reads/writes only visible text (tags escaped), while innerHTML reads/writes HTML markup that the browser parses and renders (an XSS risk).

Example:

const div = document.querySelector("div");

// innerText - text only
// Shows: <b>Bold</b>
div.innerText = "<b>Bold</b>";

// innerHTML - renders HTML
// Shows: Bold (in bold)
div.innerHTML = "<b>Bold</b>";

Security warning:

// DANGEROUS - XSS vulnerability!
div.innerHTML = userInput;

// SAFE - escapes HTML
div.innerText = userInput;

Tip: Use innerText for user-provided content; use innerHTML only for trusted HTML strings.

Go deeper:

• Cross-site scripting (XSS) — MDN — why writing untrusted strings to innerHTML lets an attacker run code on your page.