使用Javascript生成占用的div

使用Javascript生成占用的div,javascript,css,html,d3.js,Javascript,Css,Html,D3.js,这似乎是一个标准问题,但我读过的堆栈线程都没有满足我的需求 我有一系列嵌套的DIV语句,比如(不包括所有CSS) 我想制作一个简单的脚本来执行以下操作: for (i = 0; i < data.length(); i++) { //append DIV //add identifying class/id //change text values } for (a=0;a<3;a++) { var divTag = document.createElement

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

我有一系列嵌套的DIV语句,比如(不包括所有CSS)

我想制作一个简单的脚本来执行以下操作:

for (i = 0; i < data.length(); i++) {
  //append DIV
  //add identifying class/id
  //change text values
}
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); 
}
for(i=0;i

如果有帮助的话,我将在这些div附带的一些可视化中使用d3.js。如果最简单的话,我可以在d3中创建这些div…但我不太确定我将如何做到这一点。任何提示都将不胜感激。谢谢

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

假设页面上有根元素

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

一切都应该如此

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

for (i = 0; i < data.length(); i++) {
  //append DIV
  //add identifying class/id
  //change text values
}
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); 
}

用于(a=0;aHi,感谢您的回复。此方法似乎适用于它应该做的事情。但我可能问错了问题。抱歉。我正在尝试多次创建此DIV,而不是将信息附加到DIV。因此,最终将有x个具有不同信息的容器。如果有帮助,每个容器容器将代表不同的设备。每个设备都有自己的成本/伏特/安培字段。div的内容(我在其中添加innerHTML)可以是任何内容(包括其他div等)-所以你的容器会重复。如果你想,你也可以有一个使用document.write的循环,在页面加载时将重复的HTML结构写入到文档中(我猜我不是你试图重复的100%),好的,我用你的方法实现了。只是有点困惑。谢谢你的解释。