我想要的效果是，点击添加按钮给指定的UL里添加LI。并按条件给其赋值；
现在遇到的问题是：点击插入按钮时，插入的第一个LI没有按条件给class赋值；求大神帮助；谢谢哈。
以下是我的代码
<!doctype html><html> <head> <meta charset="utf-8" /> <title></title> <style> .va11{ width: 300px; height: 45px; background-color: #004488; color: #FFFFFF; line-height: 45px; padding-left: 10px; margin-bottom: 0px; } .va12{ width: 300px; height: 45px; background-color:#001133; color: #FFFFFF; line-height: 45px; padding-left: 10px; margin-bottom: 0px; } </style> <script> window.onload = function(){ var odiv_1 = document.getElementById('od2'); var oul_1 = odiv_1.getElementsByTagName('ul')[0]; var oa1_1 = oul_1.getElementsByTagName('a'); //----- var obat_1 = document.getElementById('inbut'); var otext_1 = document.getElementById('intxt'); //--- //点击按钮插件一个LI，并跟据条件给class赋值 obat_1.onclick = function(){ var oli_1 = document.createElement('li'); var oli_2 = oul_1.getElementsByTagName('li'); oli_1.innerHTML=otext_1.value + '<a href="javascript:;">删除</a>'; // if(oli_2.length>0){ oul_1.insertBefore(oli_1, oli_2[0]); //判断li%2的值是否为0，然后插入相应的className for(var i=0;i<oli_2.length;i++){ if(i%2 === 0){ oli_1.className = 'va12'; } else{ oli_1.className = 'va11'; } }; } else{ oul_1.appendChild(oli_1); } //点击删除添加的LI for(var i=0;i<oa1_1.length;i++){ oa1_1[i].onclick = function(){ alert('删除测试'); oul_1.removeChild(this.parentNode); } }; }; } </script> </head> <body> <input type="text" value="这里输入文字" id="intxt" /> <input type="button" value="添加内容" id="inbut" /> <div id="od2"> <ul> </ul> </div> </body></html>解决方案
第一次单击时oli_2.length为0，不走if(oli_2.length>0)里面，因此li附class的代码没有执行到，所以第一个li没有样式，而后面加进来的li可以执行到，所以后来的li样式应用上了。
你的代码除了命名不规范外，还有一个问题：就是你在每次单击时都去遍历已经添加进来的所有li（oli_2），然后根据奇偶去附Class，这样在数量多的时候势必造成性能问题。我的解决办法每次给新加进来的有且只有一个li附class。
只需把你的这段代码改成下面的即可：
if(oli_2.length>0){ oul_1.insertBefore(oli_1, oli_2[0]); //判断li%2的值是否为0，然后插入相应的className for(var i=0;i<oli_2.length;i++){ if(i%2 === 0){ oli_1.className = 'va12'; } else{ oli_1.className = 'va11'; } }; } else{ oul_1.appendChild(oli_1); } oul_1.appendChild(oli_1); var len = oli_2.length - 1; oli_1.className = len % 2 === 0 ? 'va12' : 'va11';