设置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_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"

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包含一个字符串值，而不是一个对象。所以不可能引用元素。您必须直接存储对象才能修改其属性。

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

Answer 3

对于未来的谷歌人，我的问题是我调用了复数元素。

document.getElementsByClassName(‘class’).innerHTML

所以它返回一个数组而不是单个元素。我把它改成了单数。

document.getElementByClassName(‘class’).innerHTML

这样我就可以更新 innerHTML 值了。

Answer 4

你应该像这样设置innerHTML值

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

Answer 5

设置innerHTML/outerHTML后需要重新分配元素：

let indexInParent=[].slice.call(elem.parentElement.children).indexOf(elem);
elem.innerHTML=innerHTML;
elem=elem.parentElement.children[indexInParent];