（jQuery）将绝对定位元素附加到列表项

Question

我有以下列表项，我想将“编辑设置”按钮附加到：

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

我使用jQuery将span添加到列表项：

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

列表项是静态定位的，当我输出页面并手动在列表项中包含span时，它已正确定位。但是当我用jQuery添加它时，它会显示在页面的右上角，在列表项之外。

我显然在这里遗漏了一些东西，所以如果有人有想法，那将非常感激。

谢谢，

Chris Hampton

网络协调员

科罗拉多州立大学

编辑：

我认为这样做（它仍然可能），但我仍然有问题。我去了'结合内部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类的位置为：static;适用于它。

Answer 1

Append()会将新范围放在列表项元素之后。您希望获取列表项的html并将两者合并，或者附加到列表项中已存在的范围。

附加到列表项的子项应该有效：

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

jsbin example