怎么用JavaScript在不改动body里面内容的前提下做一个如图所示的阶梯型乘法口诀表？初学，勿怪。

图片说明

99乘法表 #dakuangjia{ border:solid 2px red; width:800px; height:500px; } #dakuangjia1{ border:solid 1px; width:790px; height:490px; margin:auto; margin-top:4px; } .gezi{ border:solid 1px green; width:70px; height:25px; float:left; }

    <script> 
    function CreateList(){
    document.getElementById('divMain').innerHTML="<div id='dakuangjia'></div>";
    document.getElementById('dakuangjia').innerHTML="<div id='dakuangjia1'></div>";
    document.getElementById('dakuangjia1').innerHTML="<div class='gezi'>一一得一</div>";
    document.getElementById('dakuangjia1').innerHTML+="<div class='gezi'>一二得一</div>";
    }
//到这里我就不会控制这个输出div的走向了，没法像图片里那样排列。
</script>
</head>
<body>
    <input type="button" value="生成乘法表" onclick="CreateList()">
    <div id="divMain"></div>
</body>

用for循环去添加内容节点

c =['一','二','三','四','五','六','七','八','九']

function convert(n){//转换数字为中文

    if(n<10){
        return c[n-1]
    } else {
        return c[parseInt(n/10)-1] + "十" + (n%10==0?'':c[n%10-1])
    }

}
document.getElementById('divMain').innerHTML="<div id='dakuangjia'></div>";
dakuangjia = document.getElementById('dakuangjia');

for(int i = 0;i <9 ;i ++){

    dakuangjia.innerHTML+=("<div id='dakuangjia"+i+"'></div></br>");
    sub = document.getElementById('dakuangjia'+i);

    for(int j = 0 ;j <=i; j++){
        b = (j+1) * (i+1);//乘积
        sub.innerHTML+=("<div class='gezi'>"+c[j]+c[i]+(b>10?"":"得")+convert( b )+"</div>");

    }


}

思路大概就上上面的，自己可以去试试。

在要换行时加

document.getElementById('dakuangjia1').innerHTML+="<div style='clear: both'>"
```;

比如 

```document.getElementById('dakuangjia1').innerHTML="<div class='gezi'>一一得一</div>";
document.getElementById('dakuangjia1').innerHTML+="<div style='clear: both'>";
document.getElementById('dakuangjia1').innerHTML+="<div class='gezi'>一二得一</div>";

还可以在 body 里面放置一个 img 把这个图 src 路径设置上去。