替换div内容javascript（无jquery）

Question

Every time a selection is made from a dropdown menu, specific data is pulled from facebook and added to different divs. 每次从下拉菜单中进行选择时，都会从Facebook提取特定数据并将其添加到不同的div中。 I am trying to update the contents of the div every time a different selection is made, however at the minute, the contents are just appended on after the initial contents. 我试图每次进行不同的选择时都更新div的内容，但是在当前情况下，该内容只是在初始内容之后追加。

This is the code that gets data based on a selection and creates the list from the returned data 这是基于选择获取数据并根据返回的数据创建列表的代码

   <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

This is the div being targeted: 这是目标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>

I have tried resetting the innerHtml of the div every time the function to get the data from facebook is called: 每当尝试从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>

However, that still doesn't reset the contents of the div. 但是，这仍然不会重置div的内容。

I've looked at other response but they all use jquery which I am not using. 我看过其他响应，但它们都使用了我未使用的jquery。

Can anyone advise on the best way to fix this? 任何人都可以建议解决此问题的最佳方法吗？ Thanks. 谢谢。

Answer 1

I think your Hennessy approach is fine. 我认为您的轩尼诗方法很好。 Generate the inner content, then set .innerHTML . 生成内部内容，然后设置.innerHTML 。

At least one of your problems, maybe the only one, appears to be that you set .innerHTML to the return value of createList , but that function does not return anything. 至少你的问题，也许是唯一的一个，一个似乎是你设置.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