Javascript 设置innerHTML：为什么不更新DOM？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8196240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting innerHTML: Why won't it update the DOM?
提问by nipponese
Wondering why I can't get document.getElementById("my_div").innerHTMLto update the DOM when I re-assign the variable. For example:
想知道为什么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>
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?
在日志中，我可以看到单击时变量被重新分配，但 my_div 的 innerHTML 保持不变。为什么是这样？
After several years more experience...
经过几年的经验...
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:
对于那些刚开始（就像我一样）并发现自己提出同样问题的人，有两个重要的概念需要理解：
- Assign by reference:My mistake was that I thought
var myDivValue = element.innerHTMLwould 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. - Assign by value:Instead, I was simply making a copy of
element.innerHTMLvalue (which was blank) and assigning the value tomyDivValue, then inmyDivValue = "Hello";, I was assigning a new value tomyDivValue, so of course it would never updateelement.innerHTML.
- 按引用分配：我的错误是我认为
var myDivValue = element.innerHTML会创建一个对 innerHTML 的引用/地址，每次我为该引用分配一个新值时，我只能更新内容，但这不是它的工作原理。 - 按值分配：相反，我只是制作了
element.innerHTMLvalue的副本（空白）并将该值分配给myDivValue，然后在 中myDivValue = "Hello";，我为 分配了一个新值myDivValue，因此它当然永远不会更新element.innerHTML。
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_thingvs. var containerName = newValue),
令人困惑的部分：=在 JS 中使用赋值运算符 ( ) 时，并不明确您是在分配引用还是值 ( var referenceName = reference_to_thingvs. var containerName = newValue)，
As many have said in the answers, the right way to do this is to assign the document.getElementById("my_div")element to myDiv:
正如许多人在答案中所说的那样，正确的方法是将document.getElementById("my_div")元素分配给myDiv：
var myDiv = document.getElementById("my_div")
And now that I have a referenceto the element called myDiv, I can update the innerHTMLproperty whenever I like:
现在我有了对名为 的元素的引用myDiv，我可以随时更新该innerHTML属性：
myDiv.innerHTML = "Hello" // innerHTML is now "Hello"
myDiv.innerHTML = "Goodbye" // Changed it to "Goodbye"
采纳答案by ruakh
innerHTMLevaluates to a string. I'm not sure why you would expect anything different. Consider this:
innerHTML计算结果为字符串。我不知道为什么你会期待任何不同的东西。考虑一下：
var a = 'foo'; // now a = 'foo'
var b = a; // now a = 'foo', b = 'foo'
b = 'bar'; // now a = 'foo', b = 'bar'
Re-assigning bdoesn't change a.
重新分配b不会改变a。
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:
编辑添加：如果上面没有说清楚，如果你想改变innerHTML，你可以直接赋值给它：
document.getElementById("my_div").innerHTML = "Hello";
You don't need, and can't use, an intermediary variable.
您不需要也不能使用中间变量。
回答by no_name_here
var myDivValue = document.getElementById("my_div").innerHTML;
stores the value of innerHTML, innerHTML contains a string value, not an object. So no reference to the elem is possible. You must to store directly the object to modify its properties.
存储innerHTML 的值，innerHTML 包含一个字符串值，而不是一个对象。所以不可能引用 elem。您必须直接存储对象才能修改其属性。
var myDiVElem = document.getElementById("my_div");
myDiVElem.innerHTML = 'Hello'; // this makes the change
回答by kofifus
you need to reassign the element after setting innerHTML/outerHTML:
您需要在设置innerHTML/outerHTML 后重新分配元素：
let indexInParent=[].slice.call(elem.parentElement.children).indexOf(elem);
elem.innerHTML=innerHTML;
elem=elem.parentElement.children[indexInParent];
回答by Daniel Butler
For future googlers my problem was that I was calling the plural elements.
对于未来的 googlers，我的问题是我正在调用复数元素。
document.getElementsByClassName(‘class').innerHTML
document.getElementsByClassName(‘class').innerHTML
So it returned an Array not a single element. I changed it to the singular.
所以它返回一个数组而不是单个元素。我把它改成了单数。
document.getElementByClassName(‘class').innerHTML
document.getElementByClassName(‘class').innerHTML
That made it so I could update the innerHTML value.
这样我就可以更新innerHTML 值了。
回答by david
you should set the innerHTML value like
你应该像这样设置innerHTML值
var myDivValue = document.getElementById("my_div").innerHTML = "Hello";
