使用Javascript生成占用的DIV

时间:2013-03-23 19:04:45

标签: javascript css html d3.js

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

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

我想制作一个简单的脚本来做这样的事情:

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

如果有帮助,我会在几个可视化中使用d3.js,这些可视化将伴随这些DIVS。我可以在d3中创建那些DIV,如果这是最简单的......但我不太确定我会怎么做。任何提示都表示赞赏。谢谢!

1 个答案:

答案 0 :(得分: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); 
}