Javascript: Populating HTML lists with createElement & appendChild

Question

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

Each of 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>

so my answer solve your problem?

sacabuche
– sacabuche

2011-07-20 14:47:29 +00:00
Commented Jul 20, 2011 at 14:47 — sacabuche
– sacabuche, Commented Jul 20, 2011 at 14:47

sacabuche · Accepted Answer · 2013-09-19 19:00:51Z

3

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

edited Sep 19, 2013 at 19:00

answered Jul 19, 2011 at 17:28

sacabuche

2,8591 gold badge29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EKet Over a year ago

li CAN contain DIV according to this popular post [stackoverflow.com/questions/1915077/is-div-inside-list-allowed]

sacabuche Over a year ago

but look, he is trying to insert in to ul instead of li

Collectives™ on Stack Overflow

Javascript: Populating HTML lists with createElement & appendChild

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related