Inserting children into a DIV for jQuery UI accordion

I have a page with an empty DIV that I want to turn into an accordion. I understand from the documentation that the section headers need to be H3 tags, while the child elements need to be P or DIVs. Maybe I'm not getting it right. I have this code that runs when the page l开发者_开发百科oads. The accordion is created successfully, but instead of having a single section with n number of child items, it seems to be creating a header for every other child item. The elements variable is a map (a dictionary) returned from an ajax call, which contains the titles and URLs of the elements that need to be displayed in the accordion.

var markup = "";

markup += "<h3><a href='#'>Controls</a></h3>";

$.each(elements, function (title, url) {
    markup += "<div><a href='" + url + "'>" + title + "</a></div>";
});

$("#accordion").append(markup);
$("#accordion").accordion();

So basically what I'm expecting is this markup structure at the end:

<h3><a href='#'>Controls</a></h3>
<div><a href='xxx'>Foo</a></div>
<div><a href='yyy'>Bar</a></div>
... etc

I'm not sure what I'm doing wrong here. I'm on a corp laptop with no way to install firefox or chrome so I can't look at the dynamic DOM to see if the structure is being created correctly or what.

maybe you are looking for add() and not append().

If it's useful to anyone, the elements under a header section need to be contained in another element such as a DIV or P. Once I did that the sections and items ended up being arranged correctly.

Thanks!