title: Why does changing Inner html in JavaScript cause Default action even if calling evt.preventDefault();?
body: <p>I'm working on a drag and drop system where I have a file imput that takes a file dropped on a div and sets it as a value for a <code>&lt;input type=file&gt;</code> element:</p>
  
  <pre><code> &lt;div&gt;
          &lt;div id="dropContainer" style="border:1px dashed grey;height:16vh;"&gt;
              &lt;input type="file" id="fileInput" name="thumbnail" style="display:none; z-index:0"/&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div id="thumbnail-drop-text" style="margin-top: -9.5vh; margin-bottom: 7vh; z-index:1; text-align:center"&gt;
          &lt;small&gt; hey &lt;/small&gt;
      &lt;/div&gt;
     &lt;script&gt;
      dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
          evt.preventDefault();
      };
  
      dropContainer.ondrop = function(evt) {
          evt.preventDefault();
          fileInput.files = evt.dataTransfer.files;
          //document.getElementById('thumbnail-drop-text').innerHTML = "&lt;small&gt;hello&lt;/small&gt;";
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>this code should prevent the default action (opening the image file in the browser) which it does. now I want to test if it worked and therefor uncommented <code>//document.getElementById('thumbnail-drop-text').innerHTML = "&lt;small&gt;hello&lt;/small&gt;";</code> </p>
  
  <p>When I did that he browser returned to doing normal behavior (as if there was no <code>evt.preventDefault();</code> in the code)</p>
  
  <p>Why is this? how do I fix this?</p>