有没有办法在所有 div 中创建具有相同 class 名称的元素？（JavaScript）

Question

这是我的 html。 我想在子 class 中创建多个 div。

<div class="main">
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div>
    </div>

这是我的脚本。 我尝试使用 for 循环。

    for(let x = 0; x < 5; x++){
    let box = document.createElement("div");
    document.getElementsByClassName("sub")[y].appendChild(box);
};

注意-首先循环将使用索引定位 sub(div)。 然后循环将在每个子（div）内创建 5 个 div。

有没有办法以相同的 class 名称定位所有 div 并在不使用循环的情况下创建元素？

Answer 1

循环是必需的。

您可以使用document.querySelectorAll(".main div.sub")定位 div。 您需要迭代结果并 appendChild。

MDN 文档

例子

 const nodeList = document.querySelectorAll(".main div.sub") nodeList.forEach((node, index) => { let box = document.createElement("div") box.innerText = index; node.appendChild(box); });

 .sub > div { margin: 3px; border: solid 1px green; } div.sub { border-color: red; }

 <div class="main"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div>