设置innerHTML:为什么不更新DOM？

Question

想知道为什么我document.getElementById("my_div").innerHTML在重新分配变量时无法更新DOM.例如:

<div id="my_div" onclick="clicky();">
    Bye.
</div>
<script type="text/javascript" charset="utf-8">
    function clicky() {
        var myDivValue = document.getElementById("my_div").innerHTML;
        myDivValue = "Hello";
        console.log(myDivValue);
    }
</script>

在日志中,我可以看到变量在我点击时重新分配,但my_div的innerHTML保持不变.为什么是这样？

经过几年的经验......

对于刚开始的人(就像我一样)并发现自己也在问同样的事情,有两个重要的概念需要理解:

1. 通过引用分配:我的错误是我认为var myDivValue = element.innerHTML会为innerHTML创建一个引用/地址,每次我为该引用分配一个新值时,我都可以更新内容,但这不是它的工作原理.
2. 按值分配:相反,我只是制作一个element.innerHTML值的副本(这是空白的)并将值赋给myDivValue,然后在myDivValue = "Hello";,我正在分配一个新值myDivValue,所以当然它永远不会更新element.innerHTML.

令人困惑的部分:当=在JS中使用赋值运算符()时,你不是要明确指定引用或值(var referenceName = reference_to_thingvs. var containerName = newValue),

正如许多人在答案中所说,正确的方法是将document.getElementById("my_div")元素分配给myDiv:

var myDiv = document.getElementById("my_div")

现在我有一个对被调用元素的引用myDiv,我可以随时更新innerHTML属性:

myDiv.innerHTML = "Hello" // innerHTML is now "Hello"
myDiv.innerHTML = "Goodbye" // Changed it to "Goodbye"

Answer 1

innerHTML计算为字符串.我不确定为什么你会期待任何不同的东西.考虑一下:

var a = 'foo'; // now a = 'foo'
var b = a; // now a = 'foo', b = 'foo'
b = 'bar'; // now a = 'foo', b = 'bar'

重新分配b不会改变a.

编辑添加:如果从上面不清楚,如果你想改变innerHTML,你可以直接分配给它:

document.getElementById("my_div").innerHTML = "Hello";

您不需要也不能使用中间变量.

Answer 2

 var myDivValue = document.getElementById("my_div").innerHTML;

存储innerHTML的值,innerHTML包含一个字符串值,而不是一个对象.所以不可能提到elem.您必须直接存储对象以修改其属性.

var myDiVElem = document.getElementById("my_div");
myDiVElem.innerHTML = 'Hello'; // this makes the change