title: Simulating frames with jQuery load() and pushState()
body: <p><strong>tl;dr summary</strong>: jQuery's <a href="http://api.jquery.com/load/" rel="nofollow noreferrer"><code>load()</code></a> method called like:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#foo').load('similar.html #foo')
  </code></pre>
  
  <p>results in DOM structure of:</p>
  
  <pre><code>&lt;div id="foo"&gt;
    &lt;div id="foo"&gt;…&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What's the Right way to swap out a portion of a page with the equivalent part in a similar page using jQuery that does not double up the wrapper?</p>
  
  <hr>
  
  <p>I want to create a site that:</p>
  
  <ol>
  <li>Has consistent site 'chrome' around all pages (header, nav sidebar, search box, etc.).</li>
  <li>Swaps out the 'content' of the site during navigation (all chrome is persistent).</li>
  <li>Provides the History and Bookmark experience of standard browsing.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/nI4up.png" alt="enter image description here"></p>
  
  <p>I don't want to use frames due to #3, and also because I want the persistent content to overlap the dynamic content (note the persistent search results in pink overlaying the content).</p>
  
  <p>So, every page in the site will have structure similar to the following abbreviated shell:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;&lt;head&gt;&lt;title&gt;NAME&lt;/title&gt;…&lt;/head&gt;&lt;body&gt;
    &lt;div id="chrome"&gt;…&lt;/div&gt;
    &lt;div id="content"&gt;…&lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Using jQuery I can intercept the navigation and search links and use AJAX to load the page and replace just the content. And I can use <code>history.pushState()</code> to make the address bar update in a navigable and bookmarkable way:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#nav a').click(function(e){
    var url = this.href;
    $('#content').load(url+" #content",function(html){
      var title = /&lt;title&gt;(.+?)&lt;\/title&gt;/i.exec(html)[1];
      history.pushState({},title,url);
      $('title').html(title);
    });
    e.preventDefault();
  });
  </code></pre>
  
  <p><em>Additional code is needed to properly handle moving forward and backward through the history; these are irrelevant to the question.</em></p>
  
  <p><strong>However</strong>, the above code results in the DOM having:</p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;div id="content"&gt;contents from other page&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a better way to <strong>prevent this illegal doubling of <code>id</code></strong> other than changing all my markup to…</p>
  
  <pre><code>&lt;div id="content-wrap"&gt;&lt;div id="content"&gt;…&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the JS to…</p>
  
  <pre><code>$('#content-wrap').load(url+" #content",…);
  </code></pre>