Javascript: Populating HTML lists with createElement & appendChild

I am trying to create a dynamic interface that populates links to look like this: http://sandrayoon.com/UAI/www3/find.php

Each o开发者_运维技巧f those "place" buttons are in a standard HTML list, but when I combine that interface with a location based Google Places search, here:

http://sandrayoon.com/UAI/www3/placesstyle.php

The listed links aren't conforming to the button interface. This is the JS code I'm using:

 function searchComplete(place) {   

  document.getElementById('content').innerHTML = '';

      //Create HTML elements for search results
      var li = document.createElement('li');
      var a = document.createElement('a');
      var b = document.createElement('b');

      a.href = "https://maps.googleapis.com/maps/api/place/details/json?reference="+place.reference+"&sensor=true&key=xxxxxxxxxxxxxxxxxxx"; 
        a.innerHTML = place.name;
      b.innerHTML = "<br>" + 
        place.vicinity;

      // Append search results to the HTML nodes
      li.appendChild(a);
      li.appendChild(b);
      document.body.appendChild(li);      
}

And that is being populated in the HTML with:

<div id="find_list" data-role="page">

   <h2>Places Around You</h2>
     <ul id="place_list">
        <div id="content" class="ui-link"></div>
     </ul>

</div>

---

you are inserting your li to document.body and it should be inserted to a list (ul, ol...) and i'm not very sure, but i think that ul can't contain div only li