title: How to convert existing html to ajax without affecting the html dom level?
body: <p>First of all, I apologies to my poor English.</p>
  
  <p>I am trying to update a html page. I want to reduce the content in the html file and import the content in run time through ajax (using jQuery).
  The structure of the existing HTML is as the following</p>
  
  <pre><code>&lt;div class="outermost"&gt;
    &lt;h1&gt;Heading&lt;/h1&gt;
    &lt;div class="inner"&gt;
       Content
    &lt;/div&gt;
    &lt;div class="inner"&gt;
       Content
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="outermost"&gt;
    &lt;h1&gt;Heading&lt;/h1&gt;
    &lt;div class="inner"&gt;
  // repeat and repeat
  </code></pre>
  
  <p>What I want to do is,
  remove all <code>div.inner</code> and import the content into the place between <code>&lt;/h1&gt;</code> and <code>&lt;/div&gt;</code> at run time. 
  i.e.</p>
  
  <pre><code>&lt;div class="outermost"&gt;
    &lt;h1&gt;Heading&lt;/h1&gt;
  
    // Content insert here
  
  &lt;/div&gt;
  </code></pre>
  
  <p>As large amount of html DOM level code are used in the jQuery file (e.g. <code>.parent()</code>/<code>.children()</code>), I do not want to insert the content by creating new <code>div</code>, which would affect the DOM level of the current HTML file, in order to get the content through AJAX.</p>
  
  <p>One of the solution is updating <code>div.outermost</code> but I would not want to reload the heading. Are there any other way to achieve my goal? Thank you.</p>