替換div內容javascript（無jquery）

Question

每次從下拉菜單中進行選擇時，都會從Facebook提取特定數據並將其添加到不同的div中。 我試圖每次進行不同的選擇時都更新div的內容，但是在當前情況下，該內容只是在初始內容之后追加。

這是基於選擇獲取數據並根據返回的數據創建列表的代碼

   <script> 

    city = document.getElementById("citySelection")
    city.addEventListener("change", function() {
      var selected = this.value;
      var eventsList = document.getElementById("events");
      if (selected == "None") {
        eventsList.style.display = "none";
      } else {
        eventsList.style.display = "block";
      };
      if (selected == 'Bristol') {
        getBristolEvents();
      };
      if (selected == 'Leeds') {
        getLeedsEvents();
      };
      if (selected == 'Manchester') {
        getManchesterEvents();
      };
      if (selected == 'Newcastle') {
        getNewcastleEvents();
      };
    });


    function createList(response, listId) {
      var list = document.createElement('UL')
      for (var i = 0; i < 10; i++) {
        var events = response.data[i].name
        var node = document.createElement('LI');
        var textNode = document.createTextNode(events);
        node.appendChild(textNode);
        list.appendChild(node)
        listId.appendChild(list);
     }};

   </script

這是目標div：

<html>
 <div id="events" style="display: none">
     <div id="eventsDiv"  style="display: block">
      <div id="eventsListOne">
        <h3 id='headerOne'></h3>
     </div>
      <div id="eventsListTwo">
        <h3 id='headerTwo'></h3>
      </div>
      <div id="eventsListThree">
        <h3 id='headerThree'></h3>
      </div>
    </div>
  </div>
 </div>
</html>

每當嘗試從facebook獲取數據的函數被調用時，我都嘗試過重置div的innerHtml：

   <script>
    function getEventsThree(fbUrl, title) {
     var listId = document.getElementById('eventsListThree');
     var headerThree = document.getElementById('headerThree');
     listId.innerHtml = "";
     headerThree.append(title)
     FB.api(
       fbUrl,
       'GET', {
         access_token
       },
       function(response) {
         listId.innerHtml = createList(response, listId)
       }
     )};
   </script>

但是，這仍然不會重置div的內容。

我看過其他響應，但它們都使用了我未使用的jquery。

任何人都可以建議解決此問題的最佳方法嗎？ 謝謝。

Answer 1

我認為您的軒尼詩方法很好。 生成內部內容，然后設置.innerHTML 。

至少你的問題，也許是唯一的一個，一個似乎是你設置.innerHTML到的返回值createList ，但該函數不返回任何東西。

替換div內容javascript（無jquery）

問題描述

1 個解決方案

解決方案1
0 2017-12-22 14:38:06

替換div內容javascript（無jquery）

問題描述

1 個解決方案

解決方案1 0 2017-12-22 14:38:06

解決方案1
0 2017-12-22 14:38:06