添加一个 div 到每个 <span class> (Greasemonkey)

Question

我即将对这个简单的 greasemonkey 脚本失去理智

我想将某些信息添加到 class 已经存在的信息中。grid_headline

此 .grid_headline 有 8 个实例。问题是循环只将它添加到最后一个实例。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不能同时出现在文档的一个地方

当您将它附加到另一个元素时，它不再是之前它是子元素的任何元素的子元素。

如果你想在每个跨度内使用 div，那么你需要 为每个跨度创建一个 div。

旁白：HTML 禁止 div 元素成为 span 元素的子元素。考虑使用不同的元素类型。

Answer 2

你误解了另一个答案。 Quentin 说的是 document.createElement 创建的 individual <div> 只能添加到一个地方。相反，为每个要添加它的地方创建 div。这只是意味着在 for 循环中移动创建 div 的代码：

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

添加一个 div 到每个 <span class> (Greasemonkey)

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

javascript

greasemonkey

userscripts