(jQuery) L'ajout d'un élément positiooned absolu à un élément de la liste

Question

je l'élément de la liste suivante que je veux ajouter un bouton "Modifier les paramètres de à:

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

J'utilise jQuery pour ajouter une durée à la élément de la liste:

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

l'élément de la liste est positionnée de manière statique, et lorsque la sortie I de la page pour insérer manuellement la durée de l'élément de la liste, elle est correctement positionnée. Mais quand je l'ajoute avec jQuery, il apparaît dans le coin supérieur droit de la page, en dehors de l'élément de la liste.

Il me manque évidemment quelque chose ici, donc si quelqu'un a des idées, ce serait très apprécié.

Merci,

Chris Hampton

Coordinateur Web

Colorado State University

EDIT:

Je pensais que ce serait le faire (et il pourrait encore), mais J'ai toujours des problèmes. Je suis allé le « combiner le code html intérieure » itinéraire, et quand j'écris le code HTML de l'élément de liste à la console, il semble correct (elle correspond à ce qui est sorti de mon code serveur lorsque la page se charge):

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

Voilà le CSS de l'article

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

La classe .draggableBucketItem a la position: static; appliqué à elle.

Answer 1

Append() place le nouvel intervalle après l'élément de liste. Vous souhaitez obtenir le code HTML de l'élément de liste et combiner les deux, ou ajouter à l'étendue déjà existante dans l'élément de liste.

à l'enfant Adjonction de l'élément de la liste devrait fonctionner:

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

jsbin example