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

经过几年的经验......

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

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

令人困惑的部分：在JS中使用赋值运算符（element.innerHTML）时，您不明确指定引用或值（=与var referenceName = reference_to_thing），

许多人在答案中说过，正确的方法是将var containerName = newValue元素分配给document.getElementById("my_div")：

myDiv

现在我对名为var myDiv = document.getElementById("my_div")的元素有引用，我可以随时更新myDiv属性：

innerHTML

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值，如

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

Answer 4

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

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

Answer 5

对于将来的Google员工，我的问题是我称其为复数元素。

document.getElementsByClassName(‘class’).innerHTML

因此它返回一个数组而不是单个元素。我将其更改为单数。

document.getElementByClassName(‘class’).innerHTML

做到了，所以我可以更新innerHTML值。

设置innerHTML：为什么不更新DOM？

5 个答案: