继续执行功能，然后再继续使用javascript

Question

我试图从API提取项目列表，并将其添加到ul元素中。我将每个项目添加为ul的按钮，并为它们添加类“类别”。然后将带有“类别”类的元素列表打印到控制台。 但是，即使在项目加载到我的网页上之前，类别列表也被打印为空列表。 我尝试阅读一些有关异步等待的文章，以下是我想出的最好的代码，但是仍然无法正常工作。

let ul = document.querySelector(".categories ul");

let addCategories = async () => {
    let response = await fetch("https://opentdb.com/api_category.php")
    if(response.ok){
        let data = await response.json()
        return data
    } else {
        alert("HTTP-Error: " + response.status);
    }
}

(async function(){
    const data = await addCategories();
    data["trivia_categories"].forEach((category) => {
        let newCategory = document.createElement('button');
        newCategory.textContent = category["name"];
        newCategory.classList.add("category");
        ul.appendChild(newCategory);
    })
})()

var categoriesList = document.querySelectorAll(".category");
console.log(categoriesList);