(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, он появляется в верхнем правом углу страницы, вне элемента списка.

Я, очевидно, что-то здесь упускаю, поэтому, если у кого-то есть идеи, это было бы очень признательно.

Спасибо,

Крис Хэмптон

Веб-координатор

Колорадский государственный университет

EDIT:

Я думал, что это сделает (и это все еще может), но у меня все еще есть проблемы. Я пошел по маршруту «объединить внутренний 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 элемента списка и объединить их, или добавить к диапазону, уже существующему внутри элемента списка.

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

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

jsbin пример