javascript - 实现分页和加载微调器以附加元素（多个选项卡）

Question

我是 javascript 新手并创建了 2 个选项卡来显示数据。它使用车把模板和纯javascript。我想在每个选项卡中加载数据之前添加加载微调器。当使用 append 方法检索数据时，如何实现加载微调器到多个选项卡。我尝试添加加载微调器，但它始终显示加载微调器，即使数据已加载并显示。
当我尝试添加加载微调器时，出现“无法读取 null 的属性 'appendChild'”的错误
任何帮助将不胜感激。下面是没有实现加载微调器的代码

function reload_api(){
      let source = document.getElementById("template").innerHTML;
      let template = Handlebars.compile(source);
      let html = template(data_api.data);
      document.getElementById("contents").innerHTML = html;
      render_tab_contents();
      document.getElementById("index-0").click();
    }

        function tab_contents() {
    //this part is to display the data (tab content)
            data_api.data.dropdown.forEach((agoptions) => {
                data_api.data.fyafyidropdown.forEach((dropOptions) => {       
                    for (const [key, value] of Object.entries(data_api.data.listing)) {
                        let groupName = `dropdowngroup_${agoptions.ag_id}_${agoptions.ad_id}_${dropOptions.value}`;
                        if (key == groupName) {                         document.getElementById(`ag_${agoptions.ag_id}_${agoptions.ad_id}`); 
                            for (const [key1, val1] of Object.entries(value)) {
                                if (key1 != 'more_url') {
                                    let contents = document.createElement('div');
                                    contents.innerHTML ='<div class="line text-gray-500 flex flex-col divide-black divide-y-2 divide-opacity-25"><div class="flex justify-between items-center cursor-pointer p-2 transition duration-200 ease-in-out hover:bg-gray-100 hover:shadow-xl" ><div class="flex flex-col items-start">' + '<p class="font-semibold pb-1">' +val1.mail_serial_no + '</p><p class="pb-1 text-sm">'+ val1.mail_subject +  '</p><div class="flex items-center pb-1"></div></div>'+ '<div class="flex-none"><div class="flex flex-col text-sm"><p class="px-2 py-1 font-semibold ">' +  val1.pending_count + '</p></div></div></div></div>';                  document.getElementById(`ag_${agoptions.ag_id}_${agoptions.ad_id}`).appendChild(contents);                       
                                }
                            }
                        }
                    }
                });
                if(document.getElementById(`ag_${agoptions.ag_id}_${agoptions.ad_id}`).innerHTML == ''){
                                       document.getElementById(`ag_${agoptions.ag_id}_${agoptions.ad_id}`).innerHTML = '<div class="flex justify-center mt-4">No Records</div>';
                }
            });
        }

        function open(evt, Name) {

          var i, tabcontent, tablinks; 
          tabcontent = document.getElementsByClassName("tabcontent");
          for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
          }

          tablinks = document.getElementsByClassName("tablinks");
          for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
          }

          document.getElementById(Name).style.display = "block";
          evt.currentTarget.className += " active";
        }

<script type="text/x-handlebar-template" id="template">
        <div class="tab">
          <div class="mb-1">
            <div class="flex text-center text-gray-400">
            {{#each dropdown}}
              <button class="tablinks  flex-1 py-2 px-4 border-b-2 cursor-pointer " id="index-{{@index}}" onclick="open(event, 'ag_{{ag_id}}_{{ad_id}}')">{{full_name}}</button>
            {{/each}}
          </div>
          </div></div>
    
          {{#each dropdown}}
            <div id="agency_{{ag_id}}_{{ad_id}}" data-scope="ag_{{ag_id}}_{{ad_id}}" class="tabcontent">
      //here is the data displayed. the data is retrieved and displayed using the javascript in tab_contents() //
    </div>
          {{/each}}
        </script>
        <div id="contents"></div>
// Here is the sample data from api   
//data: {,…}
//dropdown: [{ag_id: "60", ad_id: "1", agency_short_name: "HQ", agency_full_name: "HQ",…},…]
//fyafyidropdown: [{label: "FYA", value: "fya"}, {label: "FYI", value: "fyi"}]
//listing: {agadgroup_60_1_fya: {,…},…}
//group_60_1_fya: {,…}
//group_60_1_fyi: {0: {mail_serial_no: "(Filing)", mail_subject: "123", pending_count: 1,…},…}

标签： javascripthandlebars.js