jquery - Using variables with .insertAfter is not working -

i'm beginner coder , english bad, apologize in front. have following css:

#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;    } 

the html:

<div id="wrapper"> <div class="page" id="page1"><h1>page1</h1> <ul> <li><a href="#page1">page 1</a></li> <li><a href="#page2">page 2</a></li> <li><a href="#page3">page 3</a></li> </ul> </div> <div class="page" id="page2"><h1>page1</h1> <ul> <li><a href="#page1">page 1</a></li> <li><a href="#page2">page 2</a></li> <li><a href="#page3">page 3</a></li> </ul> </div> <div class="page" id="page3"><h1>page1</h1> <ul> <li><a href="#page1">page 1</a></li> <li><a href="#page2">page 2</a></li> <li><a href="#page3">page 3</a></li> </ul> </div> </div> 

and jquery:

$( 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         })       }); 

it seems .insertafter not work vars. how can achieve this?

fromurl id without hash symbol, looks element name jquery, doesn’t select anything. make id selector:

$(tourl).insertafter("#" + fromurl); 

but have element anyways. needs ids?

var page = $(this).closest(".page"); var tourl = $(this).attr("href"); $(tourl).insertafter(page); 

declare variables, way. implicit globals bad. strict mode , jshint can this.