在jquery中动态创建元素列表的最佳实践

Question

我确信有很多关于这个问题的问题和文章，我似乎无法找到我正在寻找的......

我有一个表单，其中一个字段除了数字（1到30），我想要创建x个元素，其中x是选择的数字，所有元素应该具有相同的HTML结构，只有它们不同ID的。元素很复杂，我想我应该使用HTML / CSS格式化它们，因为我觉得js应该只保留业务逻辑，而不是MVC风格。

我想我的问题有两个：

1. 是一个“哲学”问题：尝试在HTML / CSS中保持“视图”（格式/布局/设计）和js中的“控制”（逻辑）是一个好主意吗？我是web dev的新手，我不确定web开发架构哲学......

2. 考虑到我想保持格式化我的js，我该如何动态添加/复制HTML元素，同时将HTML保存在它所属的同一文件中。我的第一个想法是创建尽可能多的元素，隐藏，并在需要时显示正确的数量，但这不是最好的方法...我的第二个想法是使用jquery .clone（）函数，但这会创建重复的id。

感谢。

Answer 1

我认为你真的会受益于使用客户端合成框架（比如KnockoutJs，但是还有很多其他的像Ember，Angular）。

通过这种方式，您可以在JavaScript中保留模型（在Knockout的情况下为viewmodel），并且只担心模板化HTML中视图的实现。

查看很酷的淘汰教程，也许是你正在寻找的东西

http://learn.knockoutjs.com/

Answer 2

var inputCount = paraeInt$('input').val()),
elementMarkup = $('<div class="dynamic-    div"/>');

for(var i; i < inputCount; i++){
 $('body').append(elementMarkup);
}