(JQuery) Adição de um elemento posicionado absoluto para um item da lista

Question

Eu tenho o seguinte item da lista que eu quero acrescentar um botão 'Editar configurações' para:

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

Eu uso jQuery para acrescentar uma extensão para o item da lista:

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

O item da lista é estaticamente posicionados, e quando eu saída da página e manualmente incluem a extensão do item da lista, que está devidamente posicionado. Mas quando eu adicioná-lo com jQuery, ele aparece no canto superior direito da página, fora do item da lista.

Estou obviamente faltando alguma coisa aqui, então se alguém tiver ideias, que seria muito apreciado.

Obrigado,

Chris Hampton

Coordenador Web

Colorado State University

EDIT:

Eu pensei que isso iria fazê-lo (e ainda pode), mas ainda estou tendo problemas. Eu fui o 'combinar o html interior' rota, e quando eu escrever html do item da lista para o console, parece correto (ele corresponde ao que é emitido a partir de meu código de servidor quando a página é carregada):

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

Aqui está o CSS do item

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

classe A .draggableBucketItem tem posição: estático; aplicada a ele.

Answer 1

Append () vai colocar o novo período após o elemento item da lista. Você deseja obter o html do item da lista e combinar os dois, ou anexar a extensão já existente dentro do item da lista.

Acrescentando à criança do item da lista deve funcionar:

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

jsbin exemplo