我将 `.innerHTML` 存储在变量中后，为什么分配给该变量不会修改 `.innerHTML` 属性？

Question

为什么我不能将对

some_var.innerHTML

的引用存储到变量中然后对其进行修改？

这有什么规则？

var res = document.getElementById("out").innerHTML;
res = "foo";

<div id="out">test</div>

如果我直接这样做就可以了。

Answer 1

您将其分配给

res

，然后重新分配资源。此代码不会向

innerHTML

分配任何内容。

out.innerHTML = "foo";

这就是更改innerHTML 的方法。

Answer 2

因为分配给

res

与分配给

innerHTML

不一样；即使您之前将

innerHTML

分配给

res

。

当您说

res = element.innerHTML

时，您正在将

innerHTML

的内容分配给

res

。当您说

res = "something else"

时，您正在更改分配给

res

的内容。

说

res = element.innerHTML

不 意味着对

res

所做的任何更改都会反映在

innerHTML

中。

Answer 3

因为在下面的代码中，innerHTML 值（即 test）将被分配给变量

res

。

    var out = document.getElementById("out").;
    var res = out.innerHTML;

这段代码只不过是，

    var res = document.getElementById("out").innerHTML; // res = "test"

之后，您将用“foo”覆盖 res 的值（即 test）。

Answer 4

您的代码正在运行。只是您将

innerHTML

存储在

res

中，然后在下一行覆盖它。另外，在为

res

分配值后，您不会对

"foo"

执行任何操作。

您还必须了解，当您存储

innerHTML

时，您正在存储数据的副本。如果你想修改

innerHTML

， 你必须回信。

此示例读取第一个

div

的值，然后将其加上

foo

写入第二个 div。

var out = document.getElementById("out");
var res = out.innerHTML     // Store the HTML 
res = res + " foo";         // Adjust the data
out.innerHTML = res;        // Write the new data back to the HTML element

<div id = "out">test</div>

Answer 5

如果您使用 jQuery，您可以简单地执行以下操作：

$("#out").html("foo");