I've been trying to append an element to the bottom of another using jquery; however, it does not work.
Here is my code:
<?php
$currentPath = $this->getCurrentPath();
$currentCategory = Mage::registry('current_category');
?>
<script type="text/Javascript">
jQuery(document).ready(function(){
$(".childnav").appendTo(".catalognav");
});
</script>
<ul class="catalognav">
<?php foreach ($this->getCategories() as $category): ?>
<li>
<a<?php if ($currentCategory->getId() == $category->getId()): ?> class="selected" <?php endif ?> href="<?php echo $category->getUrl() ?>"><?php echo $category->getName() ?></a>
</li>
<li><span>/</span></li>
<?php if ($currentCategory->getId() == $category->getId() || in_array($category->getId(), $currentPath)): ?>
<ul class="childnav">
<?php foreach ($this->getSubcategories($category->getId()) as $subcategory): ?>
<li><a<?php if ($currentCategory->getId() == $subcategory->getId()): ?> class="selected" <?php endif ?> href="<?php echo $subcategory->getUrl() ?>"><?php echo $subcategory->getName() ?></a></li>
<li><span>/</span></li>
<?php endforeach ?>
</ul>
<?php endif ?>
<?php endforeach ?>
</ul>
Basically nothing happens.
What I get is this:
<ul class="catalognav">
<li>
<a class="selected" href="#">Tops /</a>
</li>
<ul class="childnav">
<li><a href="#">Shirts /</a></li>
<li><a href="#">Sweaters /</a></li>
<li><a href="#">Tees /</a></li>
<li><a href="#">Hoodies and Sweatshirts /</a></li>
</ul>
<li>
<a href="#">Denim /</a>
</li>
<li>
<a href="#">Outerwear /</a>
</li>
</ul>
What I want is:
<ul class="catalognav">
<li>
<a class="selected" href="#">Tops /</a>
</li>
<li>
<a href="#">Denim /</a>
</li>
<li>
<a href="#">Outerwear /</a>
</li>
<ul class="childnav">
<li><a href="#">Shirts /</a></li>
<li><a href="#">Sweaters /</a></li>
<li><a href="#">Tees /</a></li>
<li><a href="#">Hoodies and Sweatshirts /</a></li>
</ul>
</ul>
Hopefully that made sense. Thanks for any help in advanced!