Discussion on: Javascript DOM Manipulation to improve performance

[Tobias SN]

I’d just like to note a few mistakes you’ve made here:

for (let i = 0; i < 10; i++) {
    document.querySelector('.counter').innerHTML += i;
}

will output “0123456789”, since innerHTML is a string, and thus you’re not adding i, but appending it.

let counter = 0;
for (let i = 0; i < 10; i++) {
    counter += i;
}
document.querySelector('.counter').innerHTML = counter;

will however output “45” instead, since both counter and i are numbers.

Also, you’re using innerHTML to insert text in quite a few of your snippets. This is however not recommended, as it goes through the HTML parser even though it doesn’t contain any HTML (Even then, you should use DOM functions to insert elements, not innerHTML). Thus, you should use innerText instead.

[Gabriel Mayta]

Hi Tobias,

you're right. I made a mistake. I upgraded the article. Thanks!

[yhorobey]

45, not 55

[Tobias SN]

Thanks, I fixed it.