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

Best practice for dynamicaly creating list of elements in jquery

本文关键字：最佳 列表 元素 jquery 动态 创建      更新时间：2023-09-26

我敢肯定有很多关于这个主题的问题和文章，我似乎找不到我正在寻找的东西......

我有一个表单，其中一个字段除了一个数字(1 到 30(，我想创建 x 个元素，其中 x 是选择的数字，所有元素都应该具有大致相同的 HTML 结构，仅在它们的 id 上有所不同。 元素很复杂，我想我应该使用 HTML/CSS 格式化它们， 因为我觉得 js 应该只持有业务逻辑，有点像 MVC 风格。

我想我的问题是双重的：

  1. 这是一个"哲学"问题：尝试将"视图"(格式/布局/设计(保留在 HTML/CSS 中，将"控件"(逻辑(保留在 js 中是一个好主意吗？我是 Web 开发的新手，我不确定 Web 开发架构的理念......

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

谢谢。

我认为使用客户端合成框架(如KnockoutJs，但还有很多其他的，如Ember，Angular(会真正受益。

这样你就可以把你的模型(在Knockout的情况下是viewmodel(保留在JavaScript中，而只担心视图在模板化的HTML中的嵌入。

查看很酷的淘汰赛教程，也许这就是您正在寻找的

http://learn.knockoutjs.com/

var inputCount = paraeInt$('input').val()),
elementMarkup = $('<div class="dynamic-    div"/>');
for(var i; i < inputCount; i++){
 $('body').append(elementMarkup);
}
相关文章：