(JQuery) Anfügen ein absolutes positioniertes Element auf ein Listenelement

Question

Ich habe folgendes Listenelement, dass ich ein ‚Einstellungen bearbeiten‘ Schaltfläche anhängen möchten:

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

Ich benutze jQuery eine Spanne zu dem Listenelement anhängen:

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

Das Listenelement ist statisch positioniert, und wenn ich die Seite auszugeben und manuell die Spanne in der Liste Elemente umfasst, wird es richtig positioniert ist. Aber wenn ich es mit jQuery hinzufügen, zeigt es in der rechten oberen Ecke der Seite, außerhalb des Listenelementes auf.

Ich bin offensichtlich etwas fehlt hier, also wenn jemand Ideen hat, wäre das sehr geschätzt werden.

Danke,

Chris Hampton

Web Coordinator

Colorado State University

EDIT:

dachte ich, das würde es tun (und es könnte immer noch), aber ich habe immer noch Probleme. Ich ging die ‚verbindet die innere html‘ Route, und wenn ich die Liste item html auf die Konsole schreiben, es sieht richtig (sie paßt, was von meinem Server-Code ausgegeben wird, wenn die Seite geladen wird):

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

Hier ist die CSS des Elements

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

Die .draggableBucketItem Klasse Position: statisch; angewendet, um es.

Answer 1

Append () die neue Spanne nach dem Listenelement Element platzieren wird. Sie wollen den HTML-Code der Listenposition zu erhalten und die beiden zu kombinieren, oder hängen Sie an die Spanne bereits in der Liste Element vorhanden ist.

Anfügen sollte auf das Kind des Listenelements arbeiten:

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

jsbin Beispiel