Document.querySelector returning null

Question

I’m trying to fill an HTML table with data from a Sqlserver BD.

My HTML table:

var overViewForm = '<h3>OVERVIEW</h3>' +
                       '<table id="modelTable" class="table table-striped table-bordered table-hover table-condensed">' +
                           '<thead>' +
                               '<tr>' +
                                  '<th>idInstallation</th>' +
                                  '<th>project_Code</th>' +
                                  '<th>runId</th>' +
                                  '<th>block</th>' +
                                  '<th>input</th>' +
                                  '<th>state</th>' +
                                  '<th>operation</th>' +
                                  '<th>allDescription</th>' +
                                  '<th>reducedDescription</th>' +
                                  '<th>tstId</th>' +
                               '</tr>' +
                           '</thead>' +
                           '<tbody></tbody>' +
                       '</table>';
    
function overViewPrefab() {
    return overViewForm;
}

Obs: This table is inside a Javascript file. When I create it in HTML the code presents no problems.

Javascript that fills the table:

tableBody = document.querySelector("#modelTable > tbody");
    
function loadData() {

    const request = new XMLHttpRequest();  
    request.open("get", "http://localhost:52691//api/AppLock/run/all");
    
    request.onload = () => {
        const json = JSON.parse(request.responseText);
        populateTable(json);

    };

    request.send();

}

function populateTable(json) {
    // Populate table
    json.forEach((row) => {
        const tr = document.createElement("tr");

        Object.keys(row).forEach((cell) => {
            const td = document.createElement("td");
            td.textContent = cell;
            tr.appendChild(td);
        });

        tableBody.appendChild(tr);
    });
}

Important to say that I am calling these scripts at the bottom of HTML, I am also able to recover the data from BD, the problem is time to fill the table. I’ve debugged the entire code, apparently the problem is in the first line of Javascript:

tableBody = Document.querySelector("#modelTable > tbody");

that always returns null.

I am not able to identify why this mistake is happening or how to solve it. I wish someone could explain to me why this is happening, and give me a tip on how to solve this problem.