title: Setting innerHTML: Why won't it update the DOM?
body: <p>Wondering why I can't get <code>document.getElementById("my_div").innerHTML</code> to update the DOM when I re-assign the variable. For example:</p>
  
  <pre><code>&lt;div id="my_div" onclick="clicky();"&gt;
      Bye.
  &lt;/div&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
      function clicky() {
          var myDivValue = document.getElementById("my_div").innerHTML;
          myDivValue = "Hello";
          console.log(myDivValue);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p><br>
  <strong>After several years more experience...</strong></p>
  
  <p>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:</p>
  
  <ol>
  <li><strong>Assign by reference:</strong> My mistake was that I thought <code>var myDivValue = element.innerHTML</code> would 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.</li>
  <li><strong>Assign by value:</strong> Instead, I was simply making a copy of <code>element.innerHTML</code> value (which was blank) and assigning the value to <code>myDivValue</code>, then in <code>myDivValue = "Hello";</code>, I was assigning a new value to <code>myDivValue</code>, so of course it would never update <code>element.innerHTML</code>.</li>
  </ol>
  
  <p>The confusing part: when using the assignment operator (<code>=</code>) in JS, it's not explicit that you're either assigning a reference or value (<code>var referenceName = reference_to_thing</code> vs. <code>var containerName = newValue</code>), </p>
  
  <p>As many have said in the answers, the right way to do this is to assign the <code>document.getElementById("my_div")</code> element to <code>myDiv</code>:</p>
  
  <pre><code>var myDiv = document.getElementById("my_div")
  </code></pre>
  
  <p>And now that I have a <strong>reference</strong> to the element called <code>myDiv</code>, I can update the <code>innerHTML</code> property whenever I like:</p>
  
  <pre><code>myDiv.innerHTML = "Hello" // innerHTML is now "Hello"
  myDiv.innerHTML = "Goodbye" // Changed it to "Goodbye"
  </code></pre>