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 不能只包含 div li