How can I fetch data with jquery .load, only when the target page's DOM is loaded?

I have this page where I have a ranking system. For the ranking to display I create some elements on a loop through javascript, according to the data that I fetch from the database. Then, I want the data to change when the database changes, but instead of having to reload the page, I want it to reload just the div related to the ranking content. The problem is that when I call the function $(#idOfRankingsParent).load("index.php #idOfRankingsChild), it doesn't load anything because the content is only created after the DOM is fully loaded (because of the document.createElement, and appendChild, etc). Is there any way for me to load the content after every element is created?

So, I have this function being called on a setInterval:

function loadContent() {
    console.log("loaded");
    $( "#ranking-container" ).load("index.php #ranking-wrapper");
    rankingList.style.filter="blur(0)";  
}

setInterval(loadContent, 5500);

Then I have this function creating the elements, and being called as soon as possible:

function createRanks() {

    (...)

    var pontosOrdered = x;
    var equipasOrdered = y;

    for (var t=0; t<equipasOrdered.length; t++) {
        var rankLi = document.createElement("li");
        rankingList.appendChild(rankLi);

        if (t===0) {rankLi.id="first-place";}
        if (t===1) {rankLi.id="second-place";}
        if (t===2) {rankLi.id="third-place";}

        var lugarP = document.createElement("p");
        rankLi.appendChild(lugarP);
        lugarP.classList.add("lugar");
        lugarP.innerHTML=t+1;

        var nomeEquipaP = document.createElement("a");
        rankLi.appendChild(nomeEquipaP);
        nomeEquipaP.innerHTML=equipasOrdered[t];
        nomeEquipaP.href="/equipas/#"+nameToLowerCase(equipasOrdered[t]);

        var pontosP = document.createElement("p");
        rankLi.appendChild(pontosP);
        pontosP.classList.add("pontos");
        pontosP.innerHTML=pontosOrdered[t];
    }
}

$(document).ready(function() {
    createRanks();
});

(edited)

I have here some prints of the page when I load the first time:

And when the div loads: