Modifying The Dom

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

Exercise 1 of 1

innerHTML vs createElement: Safety and Control

See why concatenating user input into innerHTML is an XSS risk, and how createElement + textContent treats all input as safe plain text.

interact to see yellow flashes â†’

innerHTML + User Input = XSS Risk

When you build content by concatenating user input into an innerHTML string, the browser parses it as HTML. An attacker can inject script-bearing elements.

// Dangerous: user input goes straight into HTML parsing
function addItem(userInput) {
  list.innerHTML += `<li>${userInput}</li>`;
  // Any HTML tags in userInput are executed by the browser
}

Rendered Output (innerHTML)

No items yet

Re-read the lecture All lectures →