Javascript：使用 createElement 和 appendChild 填充 HTML 列表

Question

我正在尝试创建一个动态界面来填充链接，如下所示：http://sandrayoon.com/UAI/www3/find.php

这些“地点”按钮中的每一个都在标准 HTML 列表中，但是当我将该界面与基于位置的 Google Places 搜索结合使用时，此处：

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

列出的链接不符合按钮界面。这是我正在使用的 JS 代码：

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

这在 HTML 中被填充为：

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

Answer 1

您正在将您的li 插入到document.body，它应该被插入到一个列表中（ul，ol...），我不太确定，但我认为ul 不能包含@ 987654325@ 仅限 li