What does it mean to add to innerHTML with + in JavaScript?

Question

I know how the innerHTML works in JavaScript like in following function:

<html>
    <head>
        <title></title>
    </head>
    <body onLoad="changetext();">
        <div id="pp" onClick="changetext();">Click here</div>
        <script>
            function changetext(){
                document.getElementById("pp").innerHTML = "New Content!";  
            }
        </script>
    </body>
</html>

This results in "New Content". But I have also come across many examples where innerHTML was used with the + or += operator like in this W3Schools example. What does it mean when I add to innerHTML using +?

possible duplicate of [How does += (plus equal) work?](http://stackoverflow.com/questions/6826260/how-does-plus-equal-work) — Ashley Medway, Feb 19 '15 at 09:51

score 3 · Answer 1 · answered Feb 19 '15 at 09:49

3

elem.innerHTML +="abc" means that it will append abc to the innerHTML of elem.

elem.innerHTML +="abc"

is equivalent to

elem.innerHTML = elem.innerHTML + "abc"

answered Feb 19 '15 at 09:49

void

33,471
8
45
91

Cyberpks · Answer 2 · 2015-02-19T09:58:00.610

1

You use innertHTML+ when you have to append new content in existing content. If you use innerHTML = "New Content" that would replace all content in pp and place "New Content" there, but innerHTML+="New Content" would append this with existing content.

As other people also mentioned innerHTML += "New Content" is equivalent to element.innerHMTL = element.innerHMTL + "New Content", so this means that the += is basically used to append content. It can be used to append/add new values and at the same time can be used to increment an int value so i++ = i+=1 = i = i+1

edited Feb 19 '15 at 09:58

answered Feb 19 '15 at 09:50

Cyberpks

1,311
5
20
47

1

Worth mentioning is that `a += b` is shorthand for `a = a + b` – Andreas Argelius Feb 19 '15 at 09:51

score 0 · Answer 3 · answered Feb 19 '15 at 09:51

0

The += operator appends the text to the elements current content.

answered Feb 19 '15 at 09:51

Dhruv Ramani

2,536
2
19
29

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

An assignment operator assigns a value to its left operand based on the value of its right operand. The basic assignment operator is equal (=), which assigns the value of its right operand to its left operand. That is, x = y assigns the value of y to x.

The other assignment operators are shorthand for the operations listed in the following table:

Shorthand operator  |     Meaning
--------------------------------------
| x += y            |     x = x + y    |
----------------------------------------
| x -= y            |     x = x - y    |
----------------------------------------
| x *= y            |     x = x * y    |
----------------------------------------
| x /= y            |     x = x / y    |
----------------------------------------
| x %= y            |     x = x % y    |
----------------------------------------
| x <<= y           |     x = x << y   |
----------------------------------------
| x >>= y           |     x = x >> y   |
----------------------------------------
| x >>>= y          |     x = x >>> y  |
----------------------------------------
| x &= y            |     x = x & y    |
----------------------------------------
| x ^= y            |     x = x ^ y    |
----------------------------------------
| x |= y            |     x = x | y    |
----------------------------------------

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators

The spec defines these "shorthand" operators as Compound Assignment ( op= )

http://ecma-international.org/ecma-262/5.1/#sec-11.13.2

So based from your example, if:

element.innerHTML = 'foo';

then:

element.innerHTML += 'bar';

is the same as:

element.innerHTML = element.innerHTML + 'bar';

which results in:

console.log(element.innerHTML); // "foobar"

The aren't "shorthand" operators, they're [*compound assignment* operators](http://ecma-international.org/ecma-262/5.1/#sec-11.13.2). — RobG, Feb 19 '15 at 11:35

What does it mean to add to innerHTML with + in JavaScript?

4 Answers4