title: Using variables with .insertAfter is not working
body: <p>I'm a beginner coder and my English is very bad, so i apologize in front. I have the following CSS:</p>
  
  <pre><code>#wrapper{
      width: 200px;
      height: 300px;
      border: solid 1px #000; 
      overflow: visible;
      white-space: nowrap;
  }
  .page{
      display: inline-block;
      margin-right: -4px;
      width: 200px;
      height: 300px;
  }
  #page1{
      background-color: #CF9; 
  }
  #page2{
      background-color: #FC9;
  }
  #page3{
      background-color: #99F;
  }
  h1{
      color: white;   
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;div class="page" id="page1"&gt;&lt;h1&gt;page1&lt;/h1&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#page1"&gt;page 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#page2"&gt;page 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#page3"&gt;page 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="page" id="page2"&gt;&lt;h1&gt;page1&lt;/h1&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#page1"&gt;page 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#page2"&gt;page 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#page3"&gt;page 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="page" id="page3"&gt;&lt;h1&gt;page1&lt;/h1&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#page1"&gt;page 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#page2"&gt;page 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#page3"&gt;page 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the Jquery:</p>
  
  <pre><code>$( document ).ready(function() {
      $(".page a").click(function(){
          fromURL=$(this).closest(".page").attr("id");
          toURL = $(this).attr("href");
          $(toURL).insertAfter(fromURL);
          //$("#page3").insertAfter("#page1"); //this works
          })
  
  
      });
  </code></pre>
  
  <p>It seems that the .insertAfter does not work with vars. How can i achieve this? </p>