使用jquery代码编写12div，而不是在html中编写

如何使用jquery写出12个div，使每个div看起来与第一个相似：

<div class='chart half' >
<h3 id="g1">graph1</h3>
<svg id='chart1'></svg>
</div>

图1

第12个是这样的：

    <div class='chart half' >
     <h3 id="g12">graph12</h3>
    <svg id='chart12' ></svg>
    </div>

图12

我想编写创建12个div的代码，而不是在html代码中写出12个单独的div。div将如上所示显示在

我已经开始了

注意：我还希望能够在jquery代码中编写图形标题。

HTML

jQuery

$(document).ready(function() {
    for (var x = 1; x < 13; x += 1) {
        $('.container').append('<div class="chart half"><h3 id="g' + x + '">Graph' + x + '</h3><svg id="chart' + x + '"></svg></div>');
    }
});

$(document).ready(function() {
    for (var x = 1; x < 13; x += 1) {
        $('.container').append('<div class="chart half"><h3 id="g' + x + '">Graph' + x + '</h3><svg id="chart' + x + '"></svg></div>');
    }
});

$（文档）.ready（函数（）{
对于（变量x=1；x<13；x+=1）{
$（'.container'）.append（'Graph'+x+''）；
}
});

在动态创建许多元素时，应该使用for循环，这些元素具有相似的类/id/text。在文档就绪时，此for循环运行，创建12个div。

h3

id在每个循环中增加1，以及

svg

id。此外，

h3

标题文本每次增加1，因此它表示Graph1，然后是Graph2等

---

在12个循环中的每个循环上，它都会将新的

div

追加到页面上的

.container

div

中，其中包括

div

、

h3

、

svg

tks，这就是我得到的，声明$div variabl是愚蠢的/没有意义的吗？我能问一下为什么你不想在代码中只包含12个div？

<div class="container"></div>

$(document).ready(function() {
    for (var x = 1; x < 13; x += 1) {
        $('.container').append('<div class="chart half"><h3 id="g' + x + '">Graph' + x + '</h3><svg id="chart' + x + '"></svg></div>');
    }
});