Waiting error

HTML

<div id="container"></div>

JavaScript

var array1 = [0,1,2,3,4,5,6,7,8,9]
var array2 = [00,10,20,30,40,50,60,70,80,90]

document.getElementById("container").append("Expected output: ")
document.getElementById("container").appendChild(document.createElement("br"));
document.getElementById("container").append("0 1 2 3")
document.getElementById("container").appendChild(document.createElement("br"));
document.getElementById("container").append("Background working...")
document.getElementById("container").appendChild(document.createElement("br"));
document.getElementById("container").append("0 10 20 30 40 50 60 70 80 90 ")
document.getElementById("container").appendChild(document.createElement("br"));
document.getElementById("container").append("4 5 6 7 8 9")
document.getElementById("container").appendChild(document.createElement("br"));
document.getElementById("container").appendChild(document.createElement("br"));
document.getElementById("container").appendChild(document.createElement("br"));


// This function is not mine. It is property of HighCharts and I can't modify it
function doDrilldown() {
	setTimeout(() => {
  	document.getElementById("container").appendChild(document.createElement("br"));
  	document.getElementById("container").append("Background working...")
  }, 1000)
}

// Method 1: Working but not correct
document.getElementById("container").append("Real output 1: ")
document.getElementById("container").appendChild(document.createElement("br"));
array1.forEach(data => {
	document.getElementById("container").append(data+"\n")
  //document.getElementById("container").appendChild(document.createElement("br"));
  if (data == 3) {
      doDrilldown(); 
      // This code should be executed after drilldown and earlier than '4 5 6 7 8 9'
      setTimeout(()=>{
        document.getElementById("container").appendChild(document.createElement("br"));
        array2.forEach(dataInside => {
          document.getElementById("container").append(dataInside+"\n")
         ...