title: Javascript changing innerHTML to a different pages content not working
body: <p>EDIT SOLVED:</p>
  
  <p>Below works great.  The suggested link marking this a duplicate does not solve the problem.
       <code>changeDrinks.innerHTML = '&lt; object type="text/html" data="drinks.html" &gt;  &lt;/object &gt; ";</code> </p>
  
  <p>What is wrong with my javascript below?</p>
  
  <p><strong>JS :</strong></p>
  
  <pre><code>var changeDrinks = document.querySelector("#menuDropWine");
  changeDrinks.innerHTML = 'drinks.html';
  </code></pre>
  
  <p>I wanted this to change the content of a div to drinks.html webpage. The div's content that is being changed looks like this...</p>
  
  <pre><code>&lt;div id="menuDropWine" class="divBtn"&gt;
  </code></pre>
  
  <p>I've read a couple questions on here already about changing the content of a div.  Some used ajax, others used jQuery, but I feel I should be able to just use innerHTML equals a link.  Currently this is just changing my div's content to the literal text output of 'drinks.html'.  I hope I'm just missing an a href reference or something, as I feel this solution should be simple.  The only real reason I want to put this into my website is so it cleans the looks of my index.html to not have so much text content, by storing the text content in different links that just load on a click.  </p>
  
  <p>Thanks for your time.  </p>