title: How to initialize new DOM contents using JavaScript and keep previous DOM somewhere else?
body: <p>I have two pages:</p>
  <ol>
  <li>page1.html</li>
  <li>page2.html</li>
  </ol>
  <p>page1.html is :</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;Some CSS and JS goes here&lt;/head&gt;
  &lt;body&gt;&lt;a href=&quot;page2.html&quot;&gt;&lt;/a&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>page2.html is :</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt; few more CSS and JS goes here&lt;/head&gt;
  &lt;body&gt;&lt;a href=&quot;page3.html&quot;&gt;&lt;/a&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>My plan is:
  When user clicks on</p>
  <pre><code>&lt;a href=&quot;page2.html&quot;&gt;&lt;/a&gt;
  </code></pre>
  <p>I grab content of page2.html via Ajax and store contents of page1.html in a JavaScript variable</p>
  <p>Now how can I insert content of page2.html in DOM and initialize it so that all the <code>$(document).ready</code> events in JavaScript of page2.html must be triggered.</p>