title: Create full HTML file using partial HTML
body: <p>I have a main html page (index.html) and need to construct that page page dynamically combining several html files <code>(custom_header_page.html/ custom_content_page.html/ custom_footer_page.html)</code>. </p>
  
  <p>I am looking for a way to get it done <strong>without</strong> any <strong>server side scripting</strong> invloving.</p>
  
  <p><strong>Eg:</strong></p>
  
  <p><strong><em>custom_header_page.html</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/liwMq.png" alt="enter image description here"></p>
  
  <p><strong><em>custom_body_page.html</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/oWBTW.png" alt="enter image description here"></p>
  
  <p><strong><em>custom_footer_page.html</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/rMqqS.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>Just tired with following in the index.html file and yes it loads properly but I want to override the <code>&lt;head&gt; &lt;/head&gt;</code> content of my index.html with what I have added in "custom_header.html" file.</p>
  
  <p><strong><em>index.html</em></strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"&gt; &lt;/script&gt;
      &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="custom_header"&gt;&lt;/div&gt;
  
      &lt;div id="custom_body"&gt;&lt;/div&gt;
  
      &lt;div id="custom_footer"&gt;&lt;/div&gt;
  
      &lt;script&gt; 
          $(function(){
            $("#custom_header").load("custom_header_page.html"); 
            $("#custom_body").load("custom_body_page.html"); 
            $("#custom_footer").load("custom_footer_page.html"); 
          });
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>