javascript - 使用 Javascript 生成占用的 DIV

Question

这似乎是一个标准问题，但我读过的堆栈线程都没有满足我的需求。

我有一系列嵌套的 DIV 语句，就像这里（不是所有的 CSS 包括在内）。

我想做一个简单的脚本来做这样的事情：

for (i = 0; i < data.length(); i++) {
  //append DIV
  //add identifying class/id
  //change text values
}

如果有帮助，我将在这些 DIVS 附带的一些可视化中使用 d3.js。如果那是最简单的，我可以在 d3 中创建那些 DIV……但我不太确定我会怎么做。任何提示表示赞赏。谢谢！

Answer 1

如果您想创建多个 div 作为不同对象的子对象，您可以创建新元素，然后将它们作为子对象附加到 DOM。

假设您在页面上有一个根元素

<div id="myDiv">
    <p>Everything should follow this</p>
</div>

然后，您可以使用如下代码注入任意数量的元素：

for (a=0;a<3;a++) {
    var divTag = document.createElement("div"); 
    divTag.id = "div"+a; 
    divTag.setAttribute("align", "center"); 
    divTag.className = "myClass"; 
    divTag.innerHTML = a+" Div tag created dynamically."; 
    document.getElementById("myDiv").appendChild(divTag); 
}