Setting innerHTML: Why won't it update the DOM?
innerHTML
evaluates to a string. I'm not sure why you would expect anything different. Consider this:
var a = 'foo'; // now a = 'foo'
var b = a; // now a = 'foo', b = 'foo'
b = 'bar'; // now a = 'foo', b = 'bar'
Re-assigning b
doesn't change 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:
document.getElementById("my_div").innerHTML = "Hello";
You don't need, and can't use, an intermediary variable.
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.
var myDiVElem = document.getElementById("my_div");
myDiVElem.innerHTML = 'Hello'; // this makes the change
For future googlers my problem was that I was calling the plural elements.
document.getElementsByClassName(‘class’).innerHTML
So it returned an Array not a single element. I changed it to the singular.
document.getElementByClassName(‘class’).innerHTML
That made it so I could update the innerHTML value.