(jQuery) Agregar un elemento posicionado absoluto a un elemento de lista

Question

Tengo el siguiente elemento de la lista al que quiero agregar un botón 'Editar configuración' para:

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

Uso jQuery para agregar un intervalo al elemento de la lista:

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

El elemento de la lista está posicionado estáticamente, y cuando imprimo la página e incluyo manualmente el intervalo en el elemento de la lista, se coloca correctamente. Pero cuando lo agrego con jQuery, aparece en la esquina superior derecha de la página, fuera del elemento de la lista.

Obviamente me estoy perdiendo algo, así que si alguien tiene ideas, eso sería muy apreciado.

Gracias,

Chris Hampton

Coordinador Web

Universidad Estatal de Colorado

EDITAR:

Pensé que esto lo haría (y aún podría hacerlo), pero todavía tengo problemas. Fui a la ruta 'combinar el html interno', y cuando escribo el html del elemento de la lista en la consola, parece correcto (coincide con lo que se obtiene de mi código de servidor cuando se carga la página):

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

Aquí está el CSS del elemento

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

La clase .draggableBucketItem tiene posición: estática; aplicado a ella.

Answer 1

Append () colocará el nuevo intervalo después del elemento del elemento de la lista. Desea obtener el html del elemento de la lista y combinar los dos, o adjuntarlo al intervalo ya existente dentro del elemento de la lista.

La anexión al elemento secundario de la lista debería funcionar:

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

ejemplo de jsbin