(jQuery) Dodawanie bezwzględnego positiooned elementu do elementu listy - jquery, css-position, listitem

Mam następującą pozycję na liście, do której chcę dołączyć przycisk „Edytuj ustawienia”:

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

Używam jQuery, aby dodać zakres do elementu listy:

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

Element listy jest pozycjonowany statycznie i kiedyWyprowadzam stronę i ręcznie włączam zakres w elemencie listy, jest on właściwie ustawiony. Ale kiedy dodam go z jQuery, pojawia się w prawym górnym rogu strony, poza elementem listy.

Najwyraźniej czegoś mi brakuje, więc jeśli ktoś ma pomysły, byłoby to bardzo mile widziane.

Dziękuję Ci,

Chris Hampton

Koordynator sieci

Colorado State University

EDYTOWAĆ:

Myślałem, że to się uda (i nadal może),ale wciąż mam problemy. Poszedłem trasą „połącz wewnętrzny HTML”, a kiedy piszę HTML konsoli do listy, wygląda ona poprawnie (pasuje do tego, co jest wyprowadzane z mojego kodu serwera podczas ładowania strony ):

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

Oto CSS przedmiotu

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

Klasa .draggableBucketItem ma pozycję: static; zastosowane do tego.

Odpowiedzi:

0 dla odpowiedzi № 1

Dodać() umieści nowy zakres za elementem elementu listy. Chcesz uzyskać html elementu listy i połączyć oba lub dołączyć do zakresu już istniejącego wewnątrz elementu listy.

Dołączanie do elementu podrzędnego elementu listy powinno działać:

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

przykład jsbin

---