Jquery append() is not appending as expected

Question

So I have the following div

<div id="object_list">

I want to append a list and items into it. So I run the following jquery

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

After that code runs, #object_list looks like this

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

Even after debugging, if I do another $("#object_list").append('<ul>'); all I get is an added <ul> after the </ul>. Why is jquery not appending to the html AFTER the list.contents(), but is going before it?

Answer 1

The issue is that you keep appending to "object_list" when you are meaning to append items to the list itself. (as an aside, you aren't closing your UL instantiation tag either)

Try something like this:

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 doesn't simply append tags, it actually appends elements. In your case you want to append list items to an unordered list that gets appended to your div.

Do:

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