（jQuery）絶対的なポジショニングされた要素をリストアイテムに追加する

Question

「設定の編集」ボタンを追加したい次のリスト項目があります：

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

jQueryを使用してリストアイテムにスパンを追加します：

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

リストアイテムは静的に配置され、ページを出力し、リストアイテムに手動でスパンを含めると、適切に配置されます。ただし、jQueryで追加すると、ページの右上隅のリストアイテムの外側に表示されます。

ここには明らかに何かが欠けているので、誰かがアイデアを持っているなら、それは大歓迎です。

ありがとうございます

クリス・ハンプトン

ウェブコーディネーター

コロラド州立大学

編集：

これでうまくいくと思っていましたが（まだそうなるかもしれません）、まだ問題があります。 「内側のhtmlを結合する」ルートを使用し、リストアイテムのhtmlをコンソールに書き込むと、正しく表示されます（ページの読み込み時にサーバーコードから出力されるものと一致します）：

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

アイテムのCSSです

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

.draggableBucketItemクラスの位置は次のとおりです。それに適用されます。

Answer 1

Append（）は、リストアイテム要素の後に新しいスパンを配置します。リストアイテムのhtmlを取得して2つを結合するか、リストアイテム内に既に存在するスパンに追加します。

リストアイテムの子に追加する必要があります：

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

jsbinの例