title: How can I use jQuery.load to replace a div including the div
body: <p>I have a div with the id of "secondHeader" and I want to replace that entire div with another div with the same id of "secondHeader" but instead of replacing it , it just adds the loaded div inside the first one. </p>
  
  <pre><code>$("#secondHeader").load("/logged-in-content.html #secondHeader");
  </code></pre>
  
  <p>This is what happens...</p>
  
  <pre><code>&lt;div id="secondHeader"&gt;&lt;div id="secondHeader"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What I want to happen is the secondHeader div from the ajax load to totally replace the secondHeader in the initial page.</p>
  
  <p>I know it sounds dumb, but here's what I'm trying to accomplish...When a user is not logged in, they see a non-logged in header. I am using ajax to allow the person to log into the site and I want to replace the non-logged in header with the logged in one via ajax.</p>
  
  <p>I have tried everything I know such as...</p>
  
  <pre><code>$("#secondHeader").replaceWith($("#secondHeader").load("/logged-in-content.html #secondHeader"));
  </code></pre>
  
  <p>...and using .remove() before hand...</p>
  
  <p>Any ideas?</p>