logo标签列表

JavaScript中使用+符号添加innerHTML是什么意思？

javascriptoperator-overloadingoperatorsinnerhtml
3

我知道JavaScript中的innerHTML是如何工作的，例如以下函数：

<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>

这将导致"New Content"的结果。但是我也遇到了许多例子，其中innerHTML与+或+=运算符一起使用，如W3Schools示例中所示。当我使用+添加到innerHTML时，这是什么意思？
2
+= 用于字符串的连接。 - prog1011
可能是重复的问题：如何使用+=（加等于）？ - Ashley Medway
4个回答
4

elem.innerHTML +="abc"的意思是它会将abc追加到elem元素的innerHTML中。

elem.innerHTML +="abc"

等同于

elem.innerHTML = elem.innerHTML + "abc"

1
当您需要在现有内容中添加新内容时，可以使用innertHTML+。 如果您使用innerHTML =“New Content”，这将替换pp中的所有内容并放置“New Content” ，但是innerHTML + =“New Content”会将其与现有内容一起附加。
正如其他人也提到的那样，innerHTML +=“New Content”等同于element.innerHMTL = element.innerHMTL +“New Content”，因此这意味着+=基本上用于追加内容。 它可以用于追加/添加新值，同时也可以用于增加int值，因此i++= i+=1 = i = i+1。
1
值得一提的是，“a += b” 是 “a = a + b” 的速记方式。 - Andreas Argelius
0

+= 运算符将文本附加到元素的当前内容。

0
一个赋值运算符根据其右操作数的值将一个值分配给其左操作数。基本的赋值运算符是等于号（=），它将其右操作数的值分配给其左操作数。也就是说，x = y 将 y 的值分配给 x。
其他赋值运算符是以下表格中列出的操作的简写形式：
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

规范将这些“简写”运算符定义为复合赋值（op=）

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

所以根据你的例子，如果：

element.innerHTML = 'foo';

然后：

element.innerHTML += 'bar';

等同于：

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

这将导致：

console.log(element.innerHTML); // "foobar"
这些不是"简写"运算符，它们是复合赋值运算符。 - RobG
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接