设置 innerHTML:为什么它不会更新 DOM

Setting innerHTML: Why won't it update the DOM?

本文关键字：更新 DOM innerHTML 为什么 设置      更新时间：2023-09-26

想知道为什么当我重新分配变量时我无法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的内部 HTML 保持不变。这是为什么呢？


**经过几年更多的经验...**

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

  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"

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";

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

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

存储 innerHTML 的值，innerHTML 包含一个字符串值，而不是一个对象。因此，不可能引用elem。必须直接存储对象才能修改其属性。

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

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

document.getElementsByClassName(‘class’).innerHTML

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

document.getElementByClassName(‘class’).innerHTML

这样我就可以更新内部HTML值了。

你应该像这样设置 innerHTML 值

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

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

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

我有同样的问题(设置 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>

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

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

相关文章：