Question

I have two “pages” (basically two div tags; only one is shown at a time). Depending on what “page” the user is on, the select box will either appear in a jQuery UI dialog on page 1 (as a slider), or on page 2 as a normal select box. My question is, can I use insertAfter() to move the select box from one page/div to another? Or, more specifically, is there any reason I shouldn’t? I’ve shied away from the clone() function because it creates duplicate IDs, and basically making a copy of each select box and trying to sync their values seems like overkill, unless there is a good reason to not use insertAfter().

Here’s a mock-up of the code, in case my explanation lacked clarity:

HTML:

    <div id="page1">
         <select id="tango">
            <option>Jester</option>
         </select>
    </div>

<div id="page2">
   <div id="dialog">
       <!-- Select Menu would be inserted/moved here -->
   </div>
</div>

JavaScript:

$('select#tango').insertAfter('#dialog');

Answer 1

Using the $('select#tango').insertAfter('#dialog'); script would actually result in:

<div id="page2">
   <div id="dialog">

   </div>
   <!-- Select Menu would be inserted/moved here -->
</div>

I think what you’d really want to have it placed where you wish would be:

$('select#tango').appendTo('#dialog');