只有最后生成的div可以输出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>无标题页 </title>
    <style type="text/css">
        .s
        {
            width: 300px;
            height: 30px;
            background-color: Green;
            margin: 12px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="main">
    </div>    <script type="text/javascript">for(var i=1;i <3;i++)
{
    var str=" <div id='d"+i+"'  class='s'> </div>"
    document.getElementById("main").innerHTML+=str;
    var id="d"+i;
    document.getElementById(id).onmouseover=getf(i);
}    function getf(i)
    {
        return function(){ alert(i);}
    }    </script>    </form>
</body>
</html>
但是如果改成静态的div可以正常输出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>无标题页 </title>
    <style type="text/css">
        .s
        {
            width: 300px;
            height: 30px;
            background-color: Green;
            margin: 12px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="main">
    <div class="s" id="d1"> </div>
    <div class="s" id="d2"> </div>
    </div>    <script type="text/javascript">for(var i=1;i <3;i++)
{
//    var str=" <div id='d"+i+"'  class='s'> </div>"
//    document.getElementById("main").innerHTML+=str;
    var id="d"+i;
    document.getElementById(id).onmouseover=getf(i);
}
    function getf(i)
    {
        return function(){ alert(i);}
    }    </script>    </form>
</body>
</html> 

解决方案 »

  1.   

    加载问题,生成好了再加载方法,如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head id="Head1" runat="server">
            <title>无标题页 </title>
            <style type="text/css">
                .s
                {
                    width: 300px;
                    height: 30px;
                    background-color: Green;
                    margin: 12px;
                }
            </style>
        </head>
        <body>
            <form id="form1" runat="server">
                <div id="main">
                </div>            <script type="text/javascript">                for(var i=1;i <3;i++)
                    {
                        var str=" <div id='d"+i+"'  class='s'> </div>"
                        document.getElementById("main").innerHTML+=str;
        
                    }
                    for(var i=1;i <3;i++)
                    {
                        var id="d"+i;
                        document.getElementById(id).onmouseover=getf(i);                }                function getf(i)
                    {
                        return function(){ alert(i);}
                    }            </script>        </form>
        </body>
    </html> 
      

  2.   

    这样写永远都只能输出最后一个,因为innerHTML属性是把前面有的清除,然后再加上你要加的,你的每次循环都用的这个属性,第一次循环加上了第一个,第二次循环,第一个被清了,加上了第二个,第三次循环第二个又被清了,加上了第三个,如此循环,最后只能是最有一个输出。