為什么我不能分配element.innerHTML？

Question

為什么不能some_var.innerHTML的引用存儲到變量中然后進行修改？

什么規則支配着這個？

HTML

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

如果我直接這樣做，它會起作用。

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

https://jsfiddle.net/yo1oajmf/

Answer 1

您將其分配給res ，然后重新分配res。 這段代碼不給innerHTML分配任何東西。

out.innerHTML = "foo";

這就是您更改innerHTML的方式。

Answer 2

您的代碼正在運行。 只是您要在res中存儲innerHTML ，然后在下一行覆蓋它。 同樣，在為它賦值"foo"之后，您不會對res執行任何操作。

您還必須了解，在存儲innerHTML ，您正在存儲數據的COPY。 如果要修改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 3

因為分配給res與分配給innerHTML ; 即使您先前innerHTML分配給res 。

當您說res = element.innerHTML ，您是將innerHTML的內容分配給res 。 然后，當您說res = "something else" ，您正在更改分配給res對象。

說res = element.innerHTML 並不意味着對所做的任何修改res都反映在innerHTML 。

Answer 4

因為在下面的代碼中，innerHTML值即test將分配給變量res 。

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

這段代碼不過是，

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

之后，您將用“ foo”覆蓋res（即測試）的值。

Answer 5

如果您使用jQuery，則只需執行以下操作：

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