innerHTML in a Loop Causes Layout Thrashing and XSS Security Flaw

A single line of JavaScript using innerHTML inside a loop can simultaneously cause severe performance degradation and a critical security vulnerability. Each loop iteration forces the browser to serialize, destroy, and rebuild the entire DOM subtree, triggering repeated reflows that visibly freeze pages on lower-end devices. The same pattern also exposes sites to DOM-based cross-site scripting (XSS), since innerHTML parses user-supplied strings as real HTML, allowing attackers to inject and execute malicious scripts. This can give bad actors full access to cookies, session tokens, and local storage of every visitor who views the affected page. OWASP explicitly warns against passing user-controlled data to innerHTML, recommending safer alternatives such as textContent or DOM creation methods like createElement.