A For loop dynamically generates a set of news and Csstext applications

Before talking about today's knowledge point, first say about the Csstext attribute application, about Csstext is to add the inline style to the label, for example, we want to give an original div dynamically added a width of 500px, and then by Csstext to dynamically add a width of 200px, So the last style on this div is only the last one you added to the 200px, and the width is gone, look at the code:

1Window.onload=function(){2         varObox=document.getelementbyid ("box");3obox.onclick=function(){4obox.style.csstext= "width:500px;height:500px;"//500px width of the first time added5         };6obox.onclick=function(){7obox.style.csstext= "width:200px;"//The second time the width of the 200px is added, then the result is only one width of 200 div8         }9 Ten}

The above example shows that Csstext is added when the tag has no attribute value, and if there is an inline style, it is equivalent to the function of substitution. Okay, let's see what's going on today. For loop dynamic Add news, set a UL tag, and then we add the LI tag dynamically and generate 5 news, the layout is very simple directly to see the code:

1 <  ID= "btn"  type= "button"  value= "Click Generate 5 News">  2<ID= "List"></ul >

The effect I want to achieve is to generate 5 news by clicking Button, so let's analyze

The first step: is to have an array of 5 news, and then add Li to the UL, then the 5 News loop in Li can be, to see the code:

1Window.onload=function(){2      varBtn=document.getelementbyid ("Btn");3      varUl=document.getelementbyid ("list");//first find the most out of the UL4      vararr=["News 1", "News 2", "News 3", "News 4", "News 5"];5      varlen=arr.length;6btn.onclick=function(){7                  for(vari=0;i<len;i++){8ul.innerhtml+= "<li>" + arr[i] + "</li>";//here must remember is append + = content, if equals is equivalent to directly to Li add the last "News 5"9             }Ten         } One};

After this, click on the button will appear 5 news, but there is a problem, that is always click on the news has been added, resulting in a click to add 5, so we want to solve this problem, want to click after the addition of 5 News after the click No longer add news, then it is

Step two: Solve the problem of always clicking on the additional news.

There are several ways to solve this problem:

1, is the button click after the direct ban (or hidden); This is not very friendly, the user experience is not very good

2, click the end of the page to empty, then the second time in the equivalent of re-enter the same; this performance is not good, the browser has been emptied, generated, emptied, generated ...

3, is to make judgments.

The last one is reasonable, then we have to make a decision, is to set a switch, when the click button comes in for the real situation, we let it generate 5 news, otherwise it is not dynamically added. The code is as follows

1Window.onload=function(){2      varBtn=document.getelementbyid ("Btn");3      varUl=document.getelementbyid ("list");//first find the most out of the UL4      vararr=["News 1", "News 2", "News 3", "News 4", "News 5"];5      varlen=arr.length;6         varonoff=true;//set the switch to true first7btn.onclick=function(){8             if(ONOFF) {9                  for(vari=0;i<len;i++){Tenul.innerhtml+= "<li>" + arr[i "+" </li> "; One  A                 } -onoff=false;//after executing the above code, we let it be false, so that next time we come in we will not execute -             } the  -         } -  -  +};

Finally this idea is directly executed once, so the performance will be a bit better, good, hope we can progress together, in the future projects can be flexible use, the above ideas are can, from the best view of the code or the last one will have a better point! OK, that's it, go ahead tomorrow! Come on!

A For loop dynamically generates a set of news and Csstext applications