想知道为什么在我重新分配变量时无法让 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 保持不变。这是为什么?
**经过几年更多的经验...**
对于那些刚开始(就像我一样)并发现自己在问同样的事情的人,有两个重要的概念需要理解:
- 按引用分配:我的错误是我认为
var myDivValue = element.innerHTML
会创建对 innerHTML 的引用/地址,并且每次我分配一个新值给那个引用,我可以只更新内容,但它不是这样工作的。 - 按值分配:相反,我只是制作了一份
element.innerHTML
值(空白)并将该值分配给myDivValue
,然后在myDivValue = "Hello";
中,我为myDivValue
分配了一个新值,所以它当然永远不会更新element.innerHTML
.
令人困惑的部分:当在 JS 中使用赋值运算符 (=
) 时,您是在分配引用还是值并不明确 ( var referenceName = reference_to_thing
与 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"
最佳答案
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";
您不需要也不能使用中间变量。
关于javascript - 设置 innerHTML : Why won't it update the DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8196240/