Добавление div для каждого (Greasemonkey)

Question

Я собираюсь сойти с ума по этому простому скрипту greasemonkey

Я хочу добавить определенную информацию к уже существующему классу .grid_headline

Существует 8 примеров этого. grid_headline. Проблема в том, что l oop добавляет его только в последний экземпляр .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);
}

Спасибо за любую помощь.

Answer 1

Элемент div не может находиться более чем в одном месте документа одновременно.

Когда вы добавляете его к другому элементу, он больше не является дочерним для любого элемента, которым он был дочерним. of before.

Если вы хотите, чтобы div внутри каждого диапазона, тогда вам нужно создать div для каждого диапазона.

---

В стороне: HTML запрещает div элементы, являющиеся потомками элементов span. Попробуйте использовать другой тип элемента.

Answer 2

Вы неправильно поняли другой ответ. Квентин говорил, что индивидуум <div>, созданный document.createElement, может быть добавлен только в одном месте. Вместо этого создайте div для каждого места, куда вы хотите добавить его. Это просто означает переместить код, который создает div в for l oop:

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);
}