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

**After several years more experience...**

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

1. 按引用分配：我的错误是我认为 var myDivValue = element.innerHTML 将创建一个对innerHTML的引用/地址，每次我为该引用分配一个新值时，我都可以只更新内容，但这不是它的工作原理。
2. 按值分配：相反，我只是复制了 element.innerHTML 值（空白）并将该值分配给 myDivValue，然后在 myDivValue = "Hello"; 中，我为 myDivValue 分配了一个新值，所以它当然永远不会更新 element.innerHTML。

令人困惑的部分：在 JS 中使用赋值运算符 (=) 时，并不明确您是在分配引用还是值（var referenceName = reference_to_thing 与 < code>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

Answer 3

对于仍在苦苦挣扎的人们，请确保您的财产拼写正确。
因为它是 innerHTML 而不是 innerHtml。太容易搞错了！

Answer 4

对于未来的谷歌用户来说，我的问题是我正在调用复数元素。

document.getElementsByClassName('class').innerHTML

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

document.getElementByClassName('class').innerHTML

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

Answer 5

刚刚浪费了几个小时，我还可以补充一点，不要意外地拥有两个具有相同 ID 的元素，这一点至关重要

Answer 6

你应该像这样设置innerHTML值

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

Answer 7

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

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

Answer 8

我有同样的问题（设置innerHTML：为什么它不会更新DOM？）但对于我的情况，这是一个不同的问题。我的问题原来是使用“InnerHtml”而不是“InnerHTML”。令人沮丧的是，js 会让你在没有任何警告的情况下继续运行它。例如下面的代码，点击后没有错误，控制台日志将显示innerHtml已成功修改。但在 html 页面上，你看到它仍然说“再见”。

<div id="my_div" onclick="clicky();">
    Bye.
</div>

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