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

Question

I wonder why I can't get document.getElementById("my_div").innerHTML update the DOM when I reassign the variable. For example:

 <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 see that the variable is redistributed when clicked, but innerHTML my_div remains unchanged. Why is this?

After several years of experience ...

For those who are just starting (like me) and asking about the same thing, there are two important concepts that you need to understand:

1. Assign by reference: My error was that I thought that var myDivValue = element.innerHTML would create a link / address for innerHTML, and every time I assigned a new value to this link, I could just update the content, but not that How does he work.
2. Assign by value: Instead, I simply made a copy of the element.innerHTML value (which was empty) and assigned a value to myDivValue , then to myDivValue = "Hello"; I assigned a new value to myDivValue so of course it will never update element.innerHTML .

The incomprehensible part: when using the assignment operator ( = ) in JS, it is not obvious that you are either assigning a link or a value ( var referenceName = reference_to_thing versus var containerName = newValue )

As many have said in the answers, the correct way to do this is to assign a document.getElementById("my_div") element to myDiv :

 var myDiv = document.getElementById("my_div") 

And now that I have a link to an element named myDiv , I can update the innerHTML property whenever I like:

 myDiv.innerHTML = "Hello" // innerHTML is now "Hello" myDiv.innerHTML = "Goodbye" // Changed it to "Goodbye" 

Answer 1

innerHTML evaluates the string. I am not sure why you expect something else. Consider this:

 var a = 'foo'; // now a = 'foo' var b = a; // now a = 'foo', b = 'foo' b = 'bar'; // now a = 'foo', b = 'bar' 

Reappointment b does not change a .

Edited to add: if it is not clear from the above, if you want to change innerHTML , you can simply assign it directly:

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

You do not need and cannot use an intermediate variable.

Answer 2

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

stores the value of innerHTML, innerHTML contains a string value, not an object. Thus, a link to the element is not possible. You must save the object directly in order to change its properties.

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

Answer 3

you must set innerHTML to

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

Answer 4

you need to reassign the element after setting innerHTML / outerHTML:

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

Answer 5

For future Google, my problem was that I called the plural of elements.

document.getElementsByClassName('class).innerHTML

Thus, he returned an array of more than one element. I changed it to a singular.

document.getElementByClassName('class).innerHTML

This allowed me to update the value of innerHTML.