Adding a div to every <span class> (Greasemonkey)

Question

I'm about to loose my mind about this simple greasemonkey script

I want to add certain informations to an already existing with the class .grid_headline

There are 8 Instances of this .grid_headline. The problem is the loop only adds it to the last instance .grid_headline

var allHeader               = document.querySelectorAll(".grid_headline")
var anzahl_container    = document.querySelectorAll(".grid_item")
var new_div                     = document.createElement("div")
var new_div_ma              = document.createElement("div")

//Anzahl Tickets
new_div.classList.add("grid_headline_t");
new_div.innerHTML = 'Anzahl Tickets: '+ anzahl_container.length;

//Anzahl aller Spalten
new_div_ma.classList.add("grid_headline_ma");
new_div_ma.innerHTML = 'Anzahl Mitarbeiter: '+ allHeader.length;


for (var i = 0; i < allHeader.length; i++) {

    allHeader[i].appendChild(new_div);  
    allHeader[i].appendChild(new_div_ma);
}

Thanks for every kind of help.

Answer 1

You misunderstood the other answer. What was Quentin saying is that an individual <div> created by document.createElement can only be added into one place. Instead, create the div for every place where you want to add it. That just means move the code that creates the div in the for loop:

const allHeader = document.querySelectorAll(".grid_headline");
const anzahl_container = document.querySelectorAll(".grid_item");


for (const header of allHeader) {
    const new_div = document.createElement("div");
    const new_div_ma = document.createElement("div");

    //Anzahl Tickets
    new_div.classList.add("grid_headline_t");
    new_div.innerHTML = 'Anzahl Tickets: '+ anzahl_container.length;

    //Anzahl aller Spalten
    new_div_ma.classList.add("grid_headline_ma");
    new_div_ma.innerHTML = 'Anzahl Mitarbeiter: '+ allHeader.length;

    header.appendChild(new_div);  
    header.appendChild(new_div_ma);
}