在加载DOM元素（循环）上的异步无效

Question

我正在尝试在JS中像探险家一样。我创建了一个类Explorer，该类Explorer在父母的DOM A DIV（Explorer）中加载，然后在Div1中的DOM A DIV2（曲目）中加载。然后，使用已知的曲目，我需要将DOM Divs加载到Div2（曲目）中，不同步以不阻止其余的。

我试图做到这一点，但它无法正如我所描述的那样起作用，DIV都会一次加载，因此它阻止了其他动作。我们应该看到红色div（Div1：Explorer），然后看到蓝色Div（Div2：曲目），然后一个一个一个一个一个divs。

有人可以帮我吗？

我做了这个Codpen来说明，这是一个SIPMLIFIED代码。 该按钮象征我在过程中要执行的其他操作。 （（ 转到第54行，然后更改执行循环以了解我的问题的阵列。 ）

https://codepen.io/dragoleforgeron/pen/pen/pen/pen/pen/ylklekleqm

class Explorer {
  
  parent;
  rep1;
  rep2;
  
  constructor(){
    this.parent = document.getElementById("parent");

    this.rep1 = [/*some object data*/];
    this.rep2 = [/*same as rep1 except that he's bigger*/];

    this.loadExplorer();
  }
  
  
  loadExplorer() {
    
    // Load explorer in parent
    let explorer = document.createElement("div");
    explorer.id = "explorer";
    explorer.classList.add("Explorer");
    this.parent.appendChild(explorer);
    
    // Load repertory container in explorer
    let repertory = document.createElement("div");
    repertory.id = "repertory";
    repertory.classList.add("Repertory");
    explorer.appendChild(repertory);
    
    this.loadRep().then(() => console.log("do some stuff after"));
  }
  
  
  async loadRep() {
    
    // Try to use rep2 instead of rep1, you will see that the explorer and repertory will be load after going through the rep (btw it's the same for rep1 but we feel it less)
    await this.rep1.map(async entry => {
      
      // Load div
      let div = document.createElement("div");
      div.id = entry.name;
      div.classList.add("Entry");
      div.innerText = entry.name;
      
      await document.getElementById("repertory").appendChild(div);
    });
  }
  
}

let explorer1 = new Explorer();

前进寻求帮助。