添加HTML元素来动态创建div在JavaScript或jQuery

我已经通过在我的asp.net mvc应用程序中的JavaScript创建动态div。这是在一个for循环中创建和我保持每id作为指标值：添加HTML元素来动态创建div在JavaScript或jQuery

for (j = 1; j <= count; j++) { 
    $("<div id=" + j + "> Step " + j + "</div>"). 
     hide().appendTo("#parentDiv").fadeIn(); 
}

现在，我想新的元素添加到这些div，在同一个for循环。但是当我要附加它时，我没有得到当前的索引div，以便我可以追加它。简而言之，我想动态地在同一个循环内动态创建div元素的循环中呈现html元素。我如何实现这一目标？ 编辑： 看到真实的情景是这样的。如何实现？

for (j = 1; j <= count; j++) { 
    $("<div id=" + j + "> Step " + j + "</div>").hide().appendTo("#parentDiv").fadeIn(); 
        for (i = 1; i <= count; i++) { 
          $("<div id=" + i + "> Data of column " + i + "</div>"). 
         hide().appendTo("#"+j).fadeIn(); 
         } 

}

来源

2011-02-04 Red Swan

只是一个供参考：即以数字开头的ID是无效的HTML。 – 2011-02-04 10:41:39

@Andy E只是补充说，这个工作，直到XHTML 1.0，但它是有效的HTML5 – Sotiris 2011-02-04 10:46:04

检查我更新的代码 – 2011-02-04 14:10:28

<script src="jquery.js"></script> 
<style> 
#hello{ 
    height: 100px; 
    width: 500px; 
    background: blue; 
} 

.small{ 
    margin-top: 10px; 
    height: 60px; 
    width: 500px; 
    background: red; 
} 

.smallest{ 

    margin-top: 10px; 
    height: 10px; 
    width: 500px; 
    background: green; 

} 
</style> 
<script> 
$(function(){ 
for (j = 1; j <= 5; j++) { 

    var div = $("<div></div>").attr({"id": "div"+j , 'class': 'small'}).appendTo($('#hello')); 
    //create some variable and add to var div 
    $('<div></div>').attr({"class": 'smallest'}).appendTo(div); 
    $('<div></div>').attr({"class": 'smallest'}).appendTo(div); 
    $('<div></div>').attr({"class": 'smallest'}).appendTo(div); 
    } 




}); 
</script> 
<div id="hello"></div>

来源

2011-02-04 10:48:14

这会工作。

var count = 10 
for (j = 1; j <= count; j++) { 
    $("<div id=a" + j + "> Step " + j + "</div>").hide().appendTo("#parentDiv").fadeIn(); 
    $('#a' + j).html("test" + j); 
}

来源

2011-02-04 10:47:17 michaelalm

添加了“a”，因为安迪é说ids以数字开头是无效的。虽然不是很确定。但我反正加了 – michaelalm 2011-02-04 10:49:37

首先，您不应该只将数字分配给您的ID，有效的ID以字母字符开头。您应该能够在脚本中稍后使用它们各自的ID引用这些新对象。你的问题的其余部分是神秘的...

要小心，如果你试图附加事件到这些，你必须使用live（）方法。经典bind（）或其快捷方式click（），hover（）等将不能在动态添加的元素上工作。

HTH

来源

2011-02-04 10:47:46 Capsule

你可能想看看这个

： http://api.jquery.com/live/

来源

2011-02-04 10:51:58 Shrinath