title: put text inside div jquery
body: <p>I am trying to label my picture inside a div container with a name in the h2 tag and health points on the bottom with a p tag, but its not working when I use .text. I am trying to insert the text in the js file, "Darth Vader" into the div h2 in the div container: charContainer</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
      &lt;title&gt;Week 4 Game&lt;/title&gt;
      &lt;link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/css/style.css"&gt;
  
      &lt;!-- Added link to the jQuery Library --&gt;
       &lt;script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256- laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
      .characters
      {
          width: 100%;
          overflow: auto;
          margin-left: 50px;
      }
      .vade, .skywalker, .obi, .dmaul
      {
          width: 130px;
          height: 100px;
          margin-top: 30px;
          margin-left: 35px;
      }
      .charContainer, .charContainer1, .charContainer2, .charContainer3
      {
          width: 200px;
          height: 170px;
          float: left;
          border: solid;
          border-color: green; 
          background-color: white;
      }
  
      h2
      {
          font-size: 50px;
          width: 100%;
          margin-left: 50px;
      }
      .your
      {
          width: 100%;
      }
      .enemies
      {
          width: 100%;
          overflow: auto;
          margin-top: 50px;
      }
      .c1
      {
          width: 100%;
          font-size: 20px;
      }
      &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class = "characters"&gt;
      &lt;div class="charContainer"&gt;
          &lt;h2 id="c1"&gt;&lt;/h2&gt;
          &lt;img class="vade" src="assets/images/vader.jpg"&gt;
          &lt;p class="c1hp"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="your"&gt;
      &lt;h2&gt;Your Character&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="enemies"&gt;
           &lt;img class="dmaul" src="assets/images/maul.png"&gt;
      &lt;/div&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>JS File</p>
  
  <pre><code>     $(document).ready(function(){
        $('#c1').text("Darth Vader");
  
  
       }
  </code></pre>