同一个div的多次迭代？

Question

所以我在屏幕上有一个菜单，其中有几个相同的框 - 唯一的区别是这些框的编号不同。

<div id="1">
    <select name="option1">
        <option value="1">foo</option>
        <option value="2">bar</option>
    </select>
</div>

<div id="2">
    <select name="option2">
        <option value="1">foo</option>
        <option value="2">bar</option>
    </select>
</div>

每个 div 是 900~ 行代码，每当我更改时，我都必须更改每个 div - 是编写一个 for 循环并使用 document.write 完成仅编写一次 div 的最佳方法（并减小文件大小）？

var divCode

for (var i=1; i < 7; i++){
 divCode +='
   <div id="'+i+'">
   <select name="option'+i+'">
   <option value="1">foo</option>
   <option value="2">bar</option>
   </select>
   </div>'
}
document.write('divCode')

或者在javascript中有更好的方法吗？我想有一个，考虑到编写 900 行串联的字符串代码并不有趣（或高效）。

Answer 1

您可以使用像 mustache 这样的 JavaScript 模板引擎来保持代码的简单性和可维护性。

这里有一个例子（除了 mustache 还使用了 jQuery）：
HTML：

<script type="text/template" id="template_divs">
    {{#divs}}
    <div id="{{id}}">
        Hallo my name is {{name}}!
    </div>
    {{/divs}}
</script>

<div id="container">
</div>

JS：

var someDivs = {divs: [{id: 1, name: "Tom"},{id: 2, name: "Bob"},{id: 3, name: "Earl"}]};

var parsed = Mustache.render($('#template_divs').html(), someDivs);

$('#container').html(parsed);

我创建了一个小提琴来为你演示：http://jsfiddle.net/2gYCz/

Answer 2

我不得不同意，使用 Javascript 库作为模板将是解决所描述问题的理想选择。但是，我想提出一个使用 html 和 Javascript 的替代方案，没有库。我要做的是在不可见的 html 中创建一个模板，如下所示：

HTML

<div class="container">
    <div class="template"> <div class="someDiv" style="display:none;overflow: hidden;">Some Div</div> </div>
</div>

Javascript

 var item =document.querySelector(".someDiv" );
        var parent = document.querySelector(".template");
        for (var i=0;i<3;i++){
            item = item.cloneNode(true);
            item.setAttribute("id","newDemo"+i);
            item.setAttribute("style","");
            parent.appendChild( item );
        }

使用 Javascript，我将克隆项目并使用动态值设置属性。