(jQuery) Appending an absolute positiooned element to a list item

Question

I have the following list item that I want to append an 'Edit Settings' button to:

<li class="draggableBucketItem ui-state-default" id="bucketItem75" bucketID="2" pageModuleID="75"><span class="spnName">HTML Content</span><li>

I use jQuery to append a span to the list item:

$('#bucketItem75').append('<span class="spnEditModule">Edit Settings</span>');

The list item is statically positioned, and when I output the page and manually include the span in the list item, it is properly positioned. But when I add it with jQuery, it shows up in the top right corner of the page, outside the list item.

I'm obviously missing something here, so if anyone has ideas, that would be much appreciated.

Thank you,

Chris Hampton

Web Coordinator

Colorado State University

EDIT:

I thought this would do it (and it still might), but I'm still having issues. I went the 'combine the inner html' route, and when I write the list item's html to the console, it looks correct (it matches what is outputted from my server code when the page loads):

<span class="spnName">HTML Content</span><span class="spnEditModule">Edit Settings</span>

Here's the CSS of the item

.draggableBucketItem span.spnEditModule{position: absolute; top: 3px; right: 3px; font-weight: bold; color: #fff;}

The .draggableBucketItem class has position: static; applied to it.

Answer 1

Append() will place the new span after the list item element. You want to get the html of the list item and combine the two, or append to the span already existing inside the list item.

Appending to the child of the list item should work:

$('#bucketItem75').children().append('<span class="spnEditModule">Edit Settings</span>');

jsbin example