title: loading a header into an html file with jquery
body: <p>I am having a problem using the load function of JQuery. I am trying to load a header.html file into my index.html file and its not working</p>
  
  <p>Lets say I have a file called header.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Header&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"&gt;
              &lt;a class="navbar-brand" href="#"&gt;Fitness&lt;/a&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse" id="navbarCollapse"&gt;
              &lt;ul class="navbar-nav mr-auto"&gt;
                  &lt;li class="nav-item active"&gt;
                  &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also have a file index.html. At the top of my body is <code>&lt;div id="header"&gt;&lt;/div&gt;</code> 
  At the bottom of my body is </p>
  
  <pre><code>&lt;script src="js/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(document).ready(function () {
      $("#header").load("header.html");
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Why isnt my header loading into the div? </p>
  
  <p>DISCLAMER: I know there are similar questions up already but I went through them and am still not able to get this to work.</p>