title: temporarily removing and later reinserting a DOM element?
body: <p>Is there some jquery magic that will let me do the following:</p>
  
  <p>[0- define some element in HTML (eg, a <em>unchecked</em> checkbox)]</p>
  
  <p>1- update its DOM element by setting one of its attributes using .attr() (eg, by setting its "checked" attribute using .attr('checked', true) )</p>
  
  <p>2- temporarily remove that element from the DOM</p>
  
  <p>3- reinsert the original element into the DOM, while preserving all its properties (ie, so that it is checked as it was at the end of step 1-- NOT like it was when initially defined in the HTML)</p>
  
  <p>The reason why I am interested in removing these elements from the DOM (rather than hiding them) is that I have noticed that it seems to improve performance a good bit. My page has three different "states" and only a third of the total number of DOM elements is needed in any given state. [I wish to keep it as a single page with different states rather than breaking it into three separate pages.]</p>
  
  <p>Until now I had been removing and reinserting elements into the DOM by storing in a var the value of </p>
  
  <pre><code>$("#myElement").html()
  </code></pre>
  
  <p>and then removing it, but now I noticed that upon reinsertion of that HTML into the DOM the changes made [in step 1] had been "undone". </p>
  
  <p>Is there a way to do this -- to temporarily remove unneeded stuff from the DOM in a way that preserves all its properties for later reinsertion?</p>
  
  <p>thanks for any insight,</p>
  
  <p>lara</p>