The innerHTML Loop Disaster: Massive Reflows and Blatant DOM XSS in One Line

A comment section that used to feel instant now stutters every time someone posts. Scrolling gets choppy. Typing in the reply box lags half a second behind every keystroke. The team assumes it is a server problem, so they check the API response time. It is fine. They check the database. It is fine.

Then, a few weeks later, a much worse report comes in. Someone posted a comment, and every single visitor who viewed that page got redirected to a strange login page and had their session hijacked.

Two separate incidents. Same root cause. Same line of code, sitting quietly inside a loop.

comments.forEach(comment => {

commentSection.innerHTML += `<div class="comment">${comment.text}</div>`;