Why doesn't jQuery Append work for the end of HTML List Items?

Question

I'm trying to clone a list item, and then append it to the bottom of that cloned list item, note that it should be below the list item being cloned, not at the bottom of the list as I can do that myself. The purpose is to use it with jQuery.ui sortable.

Everything is working fine, in fact I can even get the cloning and the appending right. However, it appends it before the closing </li> tag, and for the life of me I can't force it to append after this tag.

This is the HTML Markup:

<ul id="column-2" class="connectedSortable">
    <li class="ui-state-default">
     <div class="label">feature</div>
     <div class="action">
      <div class="delete"></div>
      <div class="other"></div>
     </div>
    </li>
</ul>

The part we're concerned with is class="other" which upon being clicked on will duplicate the list item.

This is the jQuery so far:

// This works fine
$(".other").click(function() {

    // This needs to be set (global) to be used later on in some future code.
    actionTarget = this;   

    // This grabs the whole list item
    var targetStory = $(actionTarget).parent().parent();

    // This clones the list item, as well as appending 
    // that clone to the cloned list item
    $(targetStory).clone().appendTo(targetStory);

})

This works well, it grabs the list item, clones it, then dumps it on the screen - but in the wrong place :(

<ul id="column-2" class="connectedSortable">
    <li class="ui-state-default">
     <div class="label">feature</div>
     <div class="action">
      <div class="delete"></div>
      <div class="other"></div>
     </div>
     <li class="ui-state-default">
         <div class="label">feature</div>
         <div class="action">
          <div class="delete"></div>
          <div class="other"></div>
         </div>
     </li>
    </li>
</ul>

Anyone have any idea why it's not appending to the end of the list item being cloned, and how to resolve this?

Answer 1

i think what you want is this:

$(targetStory).clone().appendTo(targetStory.parent());

Answer 2

perhaps you want to use after instead of appendTo

Answer 3

I think insertAfter is what you're looking for. after would insert the original node after the clone, rather than the clone after the original node. Something like this should work:

$(targetStory).clone().inserAfter(targetStory);