jQuery appendTo() not firing in IE7

Question

I'm moving some stuff around on document ready. Think of it like a fancy tab navigation, where I have some dynamic content in a list navigation, that toggles between the different panels.

I do have control over the markup, but the ul is in a different template in the CMS from the one used to insert dynamic content, so I'm basically moving stuff around on document ready to get it where I want. It works great, except in IE7, where the move never occurs.

HTML:

<ul class="pnlHandler"></ul>

<div id="Panels">
   <li>Here goes the content that I want to move</li>
   <div class="pnlFront">
      This has more content, but it's already where I want it
   </div>
</div>

JS:

$(document).ready(function(){
   $("#Panels").children("li").appendTo(".pnlHandler");
});

Answer 1

IE hates having <li>'s outside of a <ul>. You need to have it inside a <ul> for it to work in IE.

<ul class="pnlHandler"></ul>

<div id="panels">
   <ul class="dummy">
     <li>Here goes the content that I want to move</li>
   </ul>
   <div class="pnlFront">
      This has more content, but it's already where I want it
   </div>
</div>

And then in your JavaScript:

$(document).ready(function(){
   $("ul.dummy", "#panels").children("li").appendTo(".pnlHandler");
   $("ul.dummy", "#panels").remove();
});