(jQuery) Aggiunta di un elemento posizionato in modo assoluto a un elemento dell'elenco

Question

Ho la seguente voce di elenco a cui voglio aggiungere un pulsante "Modifica impostazioni":

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

Uso jQuery per aggiungere un intervallo alla voce di elenco:

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

L'elemento dell'elenco è posizionato staticamente e quando eseguo l'output della pagina e includo manualmente l'intervallo nell'elemento dell'elenco, viene posizionato correttamente. Ma quando lo aggiungo con jQuery, viene visualizzato nell'angolo in alto a destra della pagina, fuori dall'elenco.

Ovviamente mi manca qualcosa qui, quindi se qualcuno ha delle idee, sarebbe molto apprezzato.

Grazie

Chris Hampton

Web Coordinator

Colorado State University

EDIT:

Ho pensato che questo avrebbe funzionato (e potrebbe ancora), ma sto ancora riscontrando problemi. Ho seguito il percorso "combina html interno" e quando scrivo html dell'elemento dell'elenco sulla console, sembra corretto (corrisponde a ciò che viene emesso dal mio codice del server quando la pagina viene caricata):

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

Ecco il CSS dell'articolo

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

La classe .draggableBucketItem ha position: static; applicato ad esso.

Answer 1

Append () inserirà il nuovo intervallo dopo l'elemento dell'elemento dell'elenco. Vuoi ottenere l'html dell'elemento dell'elenco e combinare i due, oppure aggiungere l'intervallo già esistente all'interno dell'elemento dell'elenco.

L'aggiunta al figlio dell'elemento dell'elenco dovrebbe funzionare:

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

esempio di jsbin