Hi Guys, I'm a little bit stumped with this UL I'm building. I've been able to populate the list no problem but it's all messed up when it comes to formatting. Here's my script:

$.ajax({
    type: "GET",
    url: "/shop/assets/xml/tonneau_makes.xml",
    dataType: "xml",
    success: function(xml) {
       var selectInfo = $("li.selectMake");
       $(xml).find('option').each(function(){
         var make = $(this).attr('make');
          $("li.selectMake").before("<li>"+make+"</li>");
       });
    }
});

It's working beautifully. however when I go to look at it on my page and view the selection source it looks like this:

<ul id="MakeList">
  <li>CHEVROLET</li>
  <li>VINTAGE CHEVY</li>
  <li>DODGE</li>
  <li>VINTAGE FORD</li>
  <li>FORD</li>
  <li>HONDA</li>   
  <li>HUMMER</li>
  <li>ISUZU</li>
  <li>LINCOLN</li>
  <li>MAZDA</li>
  <li>MITSUBISHI</li>
  <li>NISSAN</li>
  <li>SUZUKI</li>
  <li>TOYOTA</li>
  <li class="selectMake"></li>

So I guess it is working, but it's not formatting the way I want it to. I want it to stop at Honda and form a new list. Right now it's extending beyond my div.

My html is set up like this:

<ul id="MakeList">
<li class="selectMake"></li>
</ul>

It's just an empty ul and li (note, all li's are supposed to have that class)

So not only do I need to figure out what I'm doing wrong, but I'm not sure how to get it to do what I want. I hope that all made sense! Thanks everybody!