for循环动态生成一组新闻以及cssText的应用

在说今天的知识点之前，先说一下cssText的属性应用，关于cssText是给标签添加行内样式，比如我们要给一个原有的div动态添加了宽高500px；然后又通过cssText给动态添加了一个宽200px，那么最后这个div上的样式就只有最后你添加的这个200px；而宽度就没有了,看代码：

  window.onload= function(){
        var oBox=document.getElementById("box");
        oBox.onclick=function(){
            oBox.style.cssText="500px;height:500px;"//第一次添加的500px的宽高
        };
        oBox.onclick=function(){
            oBox.style.cssText="200px;"//第二次添加的200px的宽，那么结果是只有一个宽200的div
        }

    }

从上面的案例就说明了，cssText在标签没有属性值的时候是添加，若是有行内样式的话就相当于是替换的功能。好了，接着我们来看今天的内容for循环动态添加新闻，设定一个ul标签，然后我们通过动态添加li标签以及生成5条新闻，布局很简单直接来看代码：

<input id="btn" type="button" value="点击生成5条新闻">
<ul id="list"></ul>

 我想要实现的效果是通过点击button来生成5条新闻，那么我们来分析

第一步：就是要有一个5条新闻的数组，然后给ul添加li，接着就把5条新闻循环在li里即可；来看看代码：

 window.onload= function(){
     var Btn=document.getElementById("btn");
     var Ul=document.getElementById("list");             //先找到最外面的ul
     var arr=["新闻1","新闻2","新闻3","新闻4","新闻5"];
     var len=arr.length;
        Btn.onclick=function(){
                for(var i=0;i<len;i++){
                    Ul.innerHTML+="<li>" + arr[i] + "</li>";//这里一定要记得是追加+=内容，若是等于就是相当于直接给li添加最后一个“新闻5”了
            }
        }
    };

 这样写完之后，点击按钮会出现5条新闻了，但是有一个问题出现了，那就是一直点击就一直在追加新闻，导致点击一次添加5条，所以我们要解决这个问题，想要点击之后追加5条新闻之后就再次点击不再加新闻，呢么接下来就是

第二步：解决一直点击一直追加新闻这个问题。

解决这个问题有几种方法：

1、是button点击之后就直接禁掉（或者隐藏）；这个不是很友好，用户体验不太好

2、点击完之后就将页面清空，那么第二次进来就相当于重新进来一样；这个性能不好，浏览器一直在清空，生成，清空，生成...

3、就是做判断。

最后一个比较合理，那么我们来做判断，就是先设置一个开关，当点击按钮进来为真的 情况下，我们就让它生成5条新闻，否则就不动态添加。代码如下

 window.onload= function(){
     var Btn=document.getElementById("btn");
     var Ul=document.getElementById("list");             //先找到最外面的ul
     var arr=["新闻1","新闻2","新闻3","新闻4","新闻5"];
     var len=arr.length;
        var onOff=true;//先设置开关为真
        Btn.onclick=function(){
            if(onOff){
                for(var i=0;i<len;i++){
                    Ul.innerHTML+="<li>" + arr[i] + "</li>";

                }
                onOff=false;//执行完以上代码之后，我们让它为假，这样下次进来就不执行了
            }

        }


    };

 最后这个思路就是直接执行一次，所以性能上会比较好一点，好了，希望我们能够共同进步，在以后的项目中都能灵活运用，以上想法都是可以，从代码最优上来看还是最后一个会有好一点！ok，就这样了，明天继续！加油！