title: DOMContentLoaded event doesn't seem to be working/I need help understanding how it works
body: <p>I'm working on a simple chrome extension that displays a string of text when the user opens a new tab. The code is:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="showText.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="textDiv"&gt;
              &lt;h1 id="actualText"&gt;&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              &lt;img src="settings.png"/&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the js file</p>
  
  <pre><code>document.addEventListener("DOMContentLoaded", function () {
      var text = "sample text";
      $('#actualText').append(text);
  });
  </code></pre>
  
  <p>This doesn't seem to work when I open a new tab, but when I click refresh on the tab, the text shows up. So I'm guessing the first time the DOMContentLoaded event has already been fired before this code is run? That shouldn't be the case if I load it in the head though right? I'd appreciate any help!</p>