(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

Добавить() поместит новый диапазон после элемента списка.Вы хотите получить HTML-код элемента списка и объединить его или добавить к диапазону, уже существующему внутри элемента списка.

Добавление к дочернему элементу списка должно работать:

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

пример jsbin