利用for循环往父元素里面添加多个子元素及for循环的性能优化 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>利用for循环往父元素里面添加多个子元素</title>
</head>
<body>
　　<input type="button" value="点击" id="btn"/>
　　<ul id="ul1"></ul>
　　<script type="text/javascript">
    var arr = ['逗比男神小岳岳带歪整场游戏画风','南京"偷鸡腿妈妈"被曝是惯偷',
    '高考临近减压妙招成功经验','2016年的薛之谦到底有多想红',
    '英雄联盟之王者荣耀极品仙途'];
    var str = '';　　用一个空变量来接收所有的子元素
    var len = arr.length;　　把长度计算出来，避免在for循环中写成i<arr.length，否则每次i与arr.length比较的时候程序都要计算arr数组的长度，很消耗性能。
    var oUl = document.getElementById("ul1");
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
        for(var i=0;i<len;i++){
            str += '<li>'+arr[i]+'</li>';　　把所有循环出来的li子元素都累加到变量str中
        };
        oUl.innerHTML = str;　　最后把str变量中的所有li元素赋给oUl.innerHTML
　　} 

　　</script> 
</body> 
</html>

 

posted on 2016-06-05 11:56  冬刻忆  阅读(769)  评论(0)    收藏  举报