title: JQuery objects reference after element replacement
body: <p>When writing some Javascript, I usually define upfront all the elements I need, e.g.</p>
  
  <pre><code>var $body, $header, $footer, $anInput;
  
  $(document).ready(function () {
    $body = $('body');
    $header = $('div#header');
    $footer = $('div#footer');
    $anInput = $('form#myForm input');
  };
  </code></pre>
  
  <p>Now, If I do something like</p>
  
  <pre><code>$body.html($body.html());
  </code></pre>
  
  <p>(I know, does not make sense, but it could be for instance obtained via an AJAX call).</p>
  
  <p>Am I still entitled in using <code>$header</code>, <code>$footer</code>, <code>$anInput</code> or should I get the reference once again?</p>
  
  <p>Actually, my Javascript code still works, so I would answer yes, but I suspect that I'm missing something.</p>