Databases
StackOverflow2013
Postsdbo
POWhy doesn't jQuery Append work for the end of HTML List Items?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy doesn't jQuery Append work for the end of HTML List Items?
    text
    copied!<p>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. </p> <p>Everything is working fine, in fact I can even get the cloning and the appending right. However, it appends it <b>before</b> the closing <code>&lt;/li&gt;</code> tag, and for the life of me I can't force it to append <b>after</b> this tag.</p> <p>This is the HTML Markup:</p> <pre><code>&lt;ul id="column-2" class="connectedSortable"&gt; &lt;li class="ui-state-default"&gt; &lt;div class="label"&gt;feature&lt;/div&gt; &lt;div class="action"&gt; &lt;div class="delete"&gt;&lt;/div&gt; &lt;div class="other"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>The part we're concerned with is <code>class="other"</code> which upon being clicked on will duplicate the list item.</p> <p>This is the jQuery so far:</p> <pre><code>// 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); }) </code></pre> <p>This works well, it grabs the list item, clones it, then dumps it on the screen - but in the wrong place :(</p> <pre><code>&lt;ul id="column-2" class="connectedSortable"&gt; &lt;li class="ui-state-default"&gt; &lt;div class="label"&gt;feature&lt;/div&gt; &lt;div class="action"&gt; &lt;div class="delete"&gt;&lt;/div&gt; &lt;div class="other"&gt;&lt;/div&gt; &lt;/div&gt; &lt;li class="ui-state-default"&gt; &lt;div class="label"&gt;feature&lt;/div&gt; &lt;div class="action"&gt; &lt;div class="delete"&gt;&lt;/div&gt; &lt;div class="other"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Anyone have any idea why it's not appending to the end of the list item being cloned, and how to resolve this?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload