Jquery append () не добавляется, как ожидалось

Question

Итак, у меня есть следующий div

<div id="object_list">

Я хочу добавить список и элементы в него. Итак, я запускаю следующий jquery

       $("#object_list").empty();
       $("#object_list").append('<ul');
       $("#object_list").append(list.contents());
       $("#object_list").append('</ul>');

После запуска этого кода #object_list выглядит следующим образом

<div id="object_list">
  <ul></ul>
  ...list.contents() elements
</div>

Даже после отладки, если я сделаю еще один $("#object_list").append('<ul>');, все, что я получу, это добавленный <ul> после </ul>. Почему jquery не добавляется в html ПОСЛЕ list.contents (), а идет перед ним?

Answer 1

Проблема в том, что вы продолжаете добавлять «object_list», когда хотите добавить элементы в сам список. (кроме того, вы также не закрываете свой тег создания экземпляра UL)

Попробуйте что-то вроде этого:

var $list = $("<ul></ul>");
$list.append("<li>Something 1</li>");
$list.append("<li>Something 2</li>");
$list.append("<li>Something 3</li>");

$("#object_list").append($list);

Answer 2

Append не просто добавляет теги, он фактически добавляет элементы. В вашем случае вы хотите добавить элементы списка в неупорядоченный список, который добавляется в ваш блок.

Do:

$('<ul>').appendTo('#object_list').append(list.contents());