js动态添加元素时 IE浏览器很卡，

我现在有一个数组，我用下面的方式添加function addElements(elements){
    var ul = $("#ul");   //准备添加元素的ul对象
    ul .empty();           //先清空里面的元素
    $.each(elements , function(i , v){
           ul.append("<li>"+ v +"</li>");
    });
}用上面的方式 动态添加元素。火狐还好点 ，但是IE就会卡死，因为elements数组的长度有5000以上。大家有没有更好的方式添加元素。

解决方案 »

  1.   

    问题解决<html><body>
    <input type="button" id="button" value="check me" />
    <ul id="ul"></ul>  
    </body><script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    var len = 5000; 
    var sel = $("#ul");
    var currentversion = 0;
      
    $("#button").click(function(){ 
         var arry = new Array();  //模拟5000条数据
         for(var i = 0 ; i < len; i++){  
       arry[i] = i ;
                 }
         sel.empty();
         insertIntoSelect(arry , ++currentversion);          
    });


    function insertIntoSelect(arry , version){
        if(arry.length > 0 && currentversion == version){  
    var option = arry.shift();
    sel.append("<li>"+ option  +"</li>");
    window.setTimeout(function(){
    insertIntoSelect(arry , version);  
    } , 20);    
        }
    }  

    </script>  
    </html>
      

  2.   


    就是不要让这个循环独占这cpu ， 每添加一个元素让程序停止几毫秒， 因为js没有线程，所以用递归 + setTimeout 来做了。这样做速度可能比以前更慢 ，但是浏览器不会卡死 ，而且流畅多了。
      

  3.   

    jQuery的标志啊，取一些元素和属性时都会用到的