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

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());