title: Get contents of a local page into another page
body: <p>I am trying to get only some specific <code>&lt;div&gt;</code> elements from a page (on my PC, say <code>source.html</code> ) to another page, say <code>index.html</code>. I am using jQuery ajax for the purpose and my <code>index.html</code> has a script like:</p>
  
  <pre><code>$.ajax({url: "source.html", success: function(result){
              $("#div1").html(result);
          }});
  </code></pre>
  
  <p>I just wrote it to check if I am actually getting anything or not but to my dismay, I get nothing on my page. </p>
  
  <p>I opened the browser console and got the following errors:</p>
  
  <pre><code>Mismatched tag: Expected &lt;/meta&gt; : source.html
  Mismatched tag: Expected &lt;/meta&gt; : index.html
  </code></pre>
  
  <p>I am not really able to guess what might be the reason for these errors?
  Is this the right way? 
  Any help?
  Thanks.</p>
  
  <p>Edit:
  My HTML starts like the following:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Cuckoo Sandbox&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="author" content=""&gt;
  &lt;style&gt;
  Styling here
  &lt;/style&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>My HTML is very large ( Hence I want to extract only some info), but I am redirected to this last head tag, when I click on the error.</p>