How do you safely insert user-provided content into the DOM?

Assign user input with innerText or textContent (which escape HTML) instead of innerHTML, so injected scripts cannot run.

// UNSAFE - allows script injection
element.innerHTML = userInput;

// SAFE - escapes HTML characters
element.innerText = userInput;
element.textContent = userInput;

Why it matters: If userInput contains <script>alert('hacked')</script>:

• innerHTML executes the script (XSS attack)
• innerText displays it as harmless text

For complex HTML insertion:

// Create elements programmatically
const p = document.createElement("p");
p.textContent = userInput;
container.appendChild(p);