title: Detach/re-attach div depending on checkbox state
body: <p>I am trying to get 2 divs to toggle depending on a checkbox state but can't get it to work.</p>
  
  <p>If the checkbox is checked, only div class "2" should be displayed. If the checkbox is not checked, only div 1 should be displayed. </p>
  
  <p>I got half of it to work how I want, but can't figure out how to properly toggle the content. Another problem is that the toggled content does not re-appear where it was before.</p>
  
  <pre><code>&lt;input type="checkbox" id="toggle"&gt;
  
  &lt;div class="content"&gt;
  &lt;p&gt;Lorem ipsum &lt;span class="1"&gt;1&lt;/span&gt;&lt;span class="2"&gt;2&lt;/span&gt; dolor sit&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.</p>
  
  <pre><code>y = $('.2').detach();
  var x;
  $('#toggle').change(function() {
   if (!this.checked)
     x = $('.1').detach();
   else
     $('.content').append(x);
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/sjea1vzj/" rel="nofollow noreferrer">See my Fiddle</a></p>