js生成div时的样式为什么不起作用？

Question

function show(){
var ml1value = document.getElementById("ml1value").value;
var mlvalue = document.getElementById("mlvalue").value;
mlvalue = "";
mlvalue += ml1value+"__";
var ml2s = document.getElementsByName("ml2");
var checked2 = false;
//获取所有的二级目录 设置状态
for(var i=0;i<ml2s.length;i++){
if(ml2s[i].checked){
checked2 = true;
}
}

//如果状态为true 则显示
if(checked2){
document.getElementById("xx").style.display = "none";
document.getElementById("show").style.display = "";
document.getElementById("show").innerHTML ="";
for(var i=0;i<ml2s.length;i++){

//document.getElementById("ul"+ml2s[i].id).innerHTML = "";
//document.getElementById("ul"+ml2s[i].id).innerHTML = "";
//document.getElementById("li"+ml2s[i].id).style.display = "none";
//如果二级目录状态为选中 则显示
if(ml2s[i].checked){
document.getElementById("show").innerHTML += "<li class='reli'><div class='type1' name='type1'><span>"+ml2s[i].value+":</span></div>";
//document.getElementById("li"+ml2s[i].id).style.display = "";
//document.getElementById("span"+ml2s[i].id).innerHTML = ml2s[i].value+":";
mlvalue += ml2s[i].value+"_"+ml2s[i].id+"$$$";
//获取二级目录的tag属性为1时表示有下一级目录 
if(document.getElementById("three_cont2").innerHTML!=""){
//if(ml2s[i].tag==1){
var ml3s = document.getElementsByName("ml3_"+ml2s[i].id);
//document.getElementById("ul"+ml2s[i].id).innerHTML = "";
for(var j=0;j<ml3s.length;j++){
//如果三级目录的状态为选中 则显示
if(ml3s[j].checked){
document.getElementById("show").innerHTML += "<div class='type2'><ul class='top1' ><li class='three' >"+ml3s[j].value+"<a href='#' onClick=removeMl3('"+ml2s[i].id+"','"+ml3s[j].id+"')>&times;</a></li></ul>";
//document.getElementById("ul"+ml2s[i].id).innerHTML += "<ul class='top1'><li class='three'>"+ml3s[j].value+"<a href='#' onClick=removeMl3('"+ml2s[i].id+"','"+ml3s[j].id+"')>&times;</a></li></ul>";
mlvalue += ml3s[j].value+"_"+ml2s[i].id+","+ml3s[j].id+"$$$";
//获取三级目录的tag属性为1时表示有下一级目录
if(document.getElementById("three_cont3").innerHTML!=""){
//if(ml3s[j].tag==1){
var ml4s = document.getElementsByName("ml4_"+ml2s[i].id+"_"+ml3s[j].id);
var str = "";
for(var k=0;k<ml4s.length;k++){
//如果四级目录的状态为选中 则显示
if(ml4s[k].checked){
mlvalue += ml4s[k].value+"_"+ml2s[i].id+","+ml3s[j].id+","+ml4s[k].id+"$$$";
str +=  "<li>"+ml4s[k].value+"<a href='#' onclick='removeMl4("+ml2s[i].id+","+ml3s[j].id+","+ml4s[k].id+")'>&times;</a></li>";
}
}
document.getElementById("show").innerHTML += "<ul class='top2'>"+str+"</ul>";
}
document.getElementById("show").innerHTML += "</div>"
}
}
}
document.getElementById("show").innerHTML += "</li>";
}
}
//如果状态为false 则将三级目录 四级目录清空
}else{
document.getElementById("xx").style.display = "";
document.getElementById("show").innerHTML ="";
document.getElementById("show").style.display = "none";
for(var i=0;i<ml2s.length;i++){
document.getElementById("span"+ml2s[i].id).innerHTML = "";
if(document.getElementById("three_cont2").innerHTML!=""){
//if(ml2s[i].tag==1){
var ml3s = document.getElementsByName("ml3_"+ml2s[i].id);
for(var j=0;j<ml3s.length;j++){
ml3s[j].checked = checked2;
if(document.getElementById("three_cont3").innerHTML!=""){
//if(ml3s[j].tag==1){
var ml4s = document.getElementsByName("ml4_"+ml2s[i].id+"_"+ml3s[j].id);
for(var k=0;k<ml4s.length;k++){
ml4s[k].checked = checked2;
}
}
}
}
document.getElementById("ul"+ml2s[i].id).innerHTML = "";
document.getElementById("ul"+ml2s[i].id).innerHTML = "";
document.getElementById("li"+ml2s[i].id).style.display = "none";
}
}
document.getElementById("mlvalue").value = mlvalue;}
这是3级checkbox联动的，但是生成div的时候样式是不起作用的，以下是没有生效的代码
document.getElementById("show").innerHTML += "<div class='type2'><ul class='top1' ><li class='three' >"+ml3s[j].value+"<a href='#' onClick=removeMl3('"+ml2s[i].id+"','"+ml3s[j].id+"')>&times;</a></li></ul>";不知道是为什么？谁可以解答下

Answer 1

楼主的<div>为什么没有结束标签</div>?

Answer 2

if(ml3s[j].checked){ 
document.getElementById("show").innerHTML += " <div class='type2'> <ul class='top1' > <li class='three' >"+ml3s[j].value+" <a href='#' onClick=removeMl3('"+ml2s[i].id+"','"+ml3s[j].id+"')>&times; </a> </li> </ul>"; </div>是在if体结束前生成的
document.getElementById("show").innerHTML += " </div>" 

Answer 3

因为这个div内套嵌套2个ul一个显示2级目录 一个显示2级目录对应的所有三级目录
所以</div>是在循环3级目录后在二级目录if体结束前生成的.......

Answer 4

CSS定义问题
嵌套div定义必须也是嵌套的

Answer 5

参考.....<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
</head>
<style type="text/css"> 
body,td,input,fieldset,legend{font-family:Verdana; font-size:12px; color:#333333; font-weight:normal;}
.div01{font-family:Arial; font-weight:bold; font-size:11px; padding:5px 10px; border:1px solid blue;}
.div02{font-family:Arial; font-weight:bold; font-size:14px; padding:5px 10px; border:1px solid red; margin:10px;}
</style>
<script language="javascript" type="text/javascript">
function xdo(){
var o=document.getElementById("box1");
o.innerHTML="<div id=\"box2\" class=\"div02\">这里是生成的DIV,应用div02样式</div>"
}
</script>
<body>
<input type="button" name="Submit" value="Test" onClick="javascript:xdo();">
<div id="box1" class="div01">&nbsp;</div>
</body>
</html>

Answer 6

可以说的具体些么？不是很明白
<link href="css/space.css" type=text/css rel=stylesheet>
<link href="css/space_main.css" type=text/css rel=stylesheet>
<link href="css/space1.css" type=text/css rel=stylesheet>
只是在页面上引入的css不太明白你说的意思

Answer 7

比如<div class=parent><div></div></div>
子div的这个css要定义成
.parent div{}

Answer 8

我的div是没有嵌套的 
存放二级目录的div
document.getElementById("show").innerHTML += " <li class='reli'> <div class='type1' name='type1'> <span>"+ml2s[i].value+": </span> </div>"; 存放三级目录的divdocument.getElementById("show").innerHTML += " <div class='type2'> <ul class='top1' > <li class='three' >"+ml3s[j].value+" <a href='#' onClick=removeMl3('"+ml2s[i].id+"','"+ml3s[j].id+"')>&times; </a> </li> </ul>"; 

document.getElementById("show").innerHTML += " </div>" 

Answer 9

你的div是没有嵌套 ,但是你的li是嵌套的吧,试试改下li的css定义