How to understand the += in a JavaScript For loop when using it with the innerHTML property?

Question

Just trying to get a better understanding of a JavaScript For loop. I know what the output will be, which is 0-9:

var i;
for (i = 0; i < 10; i++) {
    document.getElementById("demo").innerHTML += i + "<br>";
}

But what does innerHTML += i mean in my script? More specifically, what does the += do, and what does it mean?

Please **search thoroughly** before posting. More on searching [here](/help/searching). — T.J. Crowder, Jan 03 '17 at 12:47
@T.J.Crowder Can you post the link to the exact same question I asked? — AB10, Jan 03 '17 at 12:49
Is this a shorthand `innerHTML += i`? If so, how do you display the longer version? — AB10, Jan 03 '17 at 13:04
No, it's shorthand for `innerHTML = innerHTML + i + "
";` As the linked questions' answers say, `a += b` is `a = a + b`. — T.J. Crowder, Jan 03 '17 at 13:13
I know what the linked answer says. I was asking because I wasn't sure if the `innerHTML += i` meant the same as the linked answer. I thought that's what Stackoverflow was for? But you've cleared it up for me! — AB10, Jan 03 '17 at 13:27
Better save data into variable and then assign it to innerHTML, because each time you will trigger DOM to update. — degr, Jan 03 '17 at 14:21

score 0 · Answer 1 · answered Jan 03 '17 at 12:46

0

It means "add to the current value".

The example you give, will take the current innerHTML and add 10 <br> tags to it.

answered Jan 03 '17 at 12:46

Nimesco

1 Answers1