(jQuery) Ajout d'un élément de positionnement absolu à un élément de la liste

Question

Je souhaite ajouter un bouton "Modifier les paramètres" à l'élément de liste suivant:

<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 étendue à l'élément de liste:

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

L'élément de liste est positionné de manière statique. Lorsque j'exporte la page et que j'inclus manuellement l'étendue dans l'élément de liste, elle est correctement positionnée. Mais lorsque 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 est évident que je manque quelque chose ici, donc si quelqu'un a des idées, ce serait très apprécié.

Merci,

Chris Hampton

Coordinateur Web

Université d'État du Colorado

EDIT:

Je pensais que cela ferait l'affaire (et cela pourrait encore l'être), mais j'ai toujours des problèmes. J'ai choisi la route "Combiner le html interne" et lorsque j'écris le code HTML de l'élément de liste sur la console, il semble correct (il correspond à ce qui est généré par le code de mon serveur lors du chargement de la page):

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

Voici le CSS de l'élément

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

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

Answer 1

Append () placera la nouvelle étendue 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’ajout à l’enfant de l’élément de la liste devrait fonctionner:

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

exemple de jsbin