设置innerHTML：为什么不更新DOM？ [英] Setting innerHTML: Why won't it update the DOM?

问题描述

想知道为什么我无法获得 document.getElementById（my_div）。innerHTML 在我重新分配变量时更新DOM。例如：

Wondering why I can't get document.getElementById("my_div").innerHTML to update the DOM when I re-assign the variable. For example:

<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保持不变。这是为什么？

In the log I can see the variable get re-assigned when I click, but the innerHTML of my_div remains unchanged. Why is this?

经过几年多的经验...

对于那些刚开始的人（就像我一样）并发现自己要求同样的事情，有两个重要的概念需要理解：

For those just starting out (like I was) and found yourself asking the same thing, there are two important concepts that need to be understood:

1. 按引用分配：我的错误是我认为 var myDivValue = element.innerHTML 会创建一个引用/地址innerHTML以及每次我为该引用分配新值时，我都可以更新内容，但这不是它的工作原理。


2. 按值分配：相反，我只是复制了 element.innerHTML 值（空白）并将值分配给 myDivValue ，然后在 myDivValue =Hello; ，我正在为 myDivValue 分配一个新值，所以当然它永远不会更新 element.innerHTML 。

1. Assign by reference: My mistake was that I thought var myDivValue = element.innerHTML would create a reference/address to innerHTML and every time I assigned a new value to that reference, I could just update content, but that's not how it works.
2. Assign by value: Instead, I was simply making a copy of element.innerHTML value (which was blank) and assigning the value to myDivValue, then in myDivValue = "Hello";, I was assigning a new value to myDivValue, so of course it would never update element.innerHTML.

令人困惑的部分：使用assignm时JS中的ent运算符（ = ），并不明确表示您要么分配引用或值（ var referenceName = reference_to_thing vs. var containerName = newValue ），

The confusing part: when using the assignment operator (=) in JS, it's not explicit that you're either assigning a reference or value (var referenceName = reference_to_thing vs. var containerName = newValue),

正如许多人在答案中所说，正确的方法这样做是将 document.getElementById（my_div）元素分配给 myDiv ：

As many have said in the answers, the right way to do this is to assign the document.getElementById("my_div") element to myDiv:

var myDiv = document.getElementById("my_div")

现在我对名为 myDiv 的元素有一个引用，我可以更新 innerHTML 属性我喜欢：

And now that I have a reference to the element called myDiv, I can update the innerHTML property whenever I like:

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

推荐答案

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

innerHTML evaluates to a string. I'm not sure why you would expect anything different. Consider this:

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

重新分配 b 不会改变 a 。

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

Edited to add: In case it's not clear from the above, if you want to change innerHTML, you can just assign to it directly:

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

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

You don't need, and can't use, an intermediary variable.

这篇关于设置innerHTML：为什么不更新DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！