Why could document.querySelector() be returning null in this case?

Question

What could cause queryselector to not find an element in such a scenario

function load_home(){
    //this function has a lot of fetch calls and creates a lot of divs
}

document.addEventListener("DOMContentLoaded", ()=>{
    load_home();

    let divs = document.querySelectorAll("div"); //doesnt contain any of the divs that should have                 been created
    console.log("Count", divs.length); 
})

i have something similar to the above.... i call a function, load_home when the DOM is loaded that creates some divs... on the next line i try to count the divs on the page... but i cant find all the divs that have been created in load_home ...

assuming load home functions properly, and i properly query for all the divs on the page, what could cause me to not find the divs created in load_home ?

really, i want to know if there are any feature in javascript that could cause such a thing ie and I'm just making stuff up here maybe functions with fetch calls run on another thread (dont even really know what these are) and as such load_home might not be done yet or the DOMContentLoaded has some weird feature that wont let what I'm doing work or maybe fetch calls cause some unexpected behaviour or created stuff cant be accessed normally in EventListeners ?....

Answer 1

Try making the load_home() function asynchronous and awaiting it before document.querySelectorAll('div').

async function load_home() {
    //this function has a lot of fetch calls and creates a lot of divs
    // Also remember to add `await` keyword before calling `fetch()`
}

document.addEventListener("DOMContentLoaded", async () => {
    await load_home();

    let divs = document.querySelectorAll("div"); 
    console.log("Count", divs.length); 
});

Also you can use something like this:

function load_home() {
    // Example fetch call
    fetch('https://example.com/api/data')
        .then(response => response.json())
        .then(data => {
            // Process data and create divs
            createDivs();
        })
        .catch(error => console.error('Error:', error));
}

function createDivs() {
    // Create divs here

    // Now, call the function that relies on the created divs
    countDivs();
}

function countDivs() {
    let divs = document.querySelectorAll("div");
    console.log("Count", divs.length);
}

document.addEventListener("DOMContentLoaded", () => {
    load_home();
});