js 动态创建HTML元素

今天有个朋友要帮她完成一个小小的效果,发了点时间做了下,也不知道能不能达到要求,先帖了上来,下面是要求:

<!-- 进入页面的时候，只有一个框，是整个大的题目，然后底下是一个下拉菜单，是选择这个题目有几个小题，选择完后就出现几个框是小题的内容框，然后在每个小题的下面还有一个下拉是选择有几个选项的-->

代码:




<textarea cols="60" rows="12"></textarea>


<br/>


选择答题数目:


<select name="select1" id="select1" onchange="change1(this);">


<option value=0>请选择</option>


<script>




for(var i=1;i<=10;i++)...{


document.write("<option value="+i+">"+i+"</option>");


}


</script>


</select>


<table id="tbl">


<tbody id="Obj1" name="Obj1">




</tbody>


</table>


<script>




function change1(obj)...{




if(obj.value==0)...{


alert("请至少选择一项");return;


}


var tbl=document.getElementById("tbl");//得到table


var tbo=document.getElementById("Obj1");//得到table下的tbody


tbl.removeChild(tbo);//删除table下的tbody元素


var tbody=document.createElement("tbody");//重新创建一个 tbody


tbody.setAttribute("id","Obj1");


tbl.appendChild(tbody);//把tbody给table




for(var i=0;i<obj.value;i++)...{//根据所选数，得到文本数目


var row=document.createElement("tr");


row.setAttribute("id","tr["+i+"]");


var cell=document.createElement("td");


var cell1=document.createElement("td");


var cell2=document.createElement("td");


var cell3=document.createElement("td");


var sele=document.createElement("select");


var radio1=document.createElement("input");


var radio2=document.createElement("input");


radio1.setAttribute("type","radio");


radio2.setAttribute("type","radio");


radio1.setAttribute("name","isMul");


radio1.setAttribute("value","single");


radio2.setAttribute("name","isMul");


radio2.setAttribute("value","poly");


sele.setAttribute("name","selectobj");




for(var j=0;j<=10;j++)...{//循环得到OPTION


var opt=document.createElement("option");


var opttxt=document.createTextNode(j);


opt.setAttribute("value",j);


opt.text=j;//给OPTION赋值


sele.appendChild(opt);


}


var textnode=document.createTextNode("请输入内容: ");


var textnode1=document.createTextNode("选项数目: ");


var textnode2=document.createTextNode("选项类型: ");


var textnode3=document.createTextNode("单选: ");


var textnode4=document.createTextNode("多选: ");


cell2.appendChild(textnode1);


cell2.appendChild(sele);


cell1.appendChild(textnode);


cell3.appendChild(textnode2);


cell3.appendChild(radio1);


cell3.appendChild(textnode3);


cell3.appendChild(radio2);


cell3.appendChild(textnode4);


var txt=document.createElement("input");


txt.setAttribute("type","text");


txt.setAttribute("id","txt["+i+"]");


txt.setAttribute("name","txt["+i+"]");


cell.appendChild(txt);


row.appendChild(cell1);row.appendChild(cell);row.appendChild(cell2);


row.appendChild(cell3);


tbody.appendChild(row);


}


}


</script>



刚才在论坛上看到一个问题，顺便答了，和这个有点关系，也帖出来了。
如何通过点击"改变"按钮，给“显示”按钮添加onclick事件？使得点击“显示”按钮也能弹出对话框？
<table>
<tr>
<td> <input type="button" name="btn1" value="改变" onclick="fff()" id="bbb"> </td>
</tr>
<tr>
<td> <input type="button" name="btn2" value="显示" id="btn2"> </td>
</tr>
<tr>
<td> <input type="button" name="bsrcxbtn" value="查询" onclick="Foo('11')"> </td>
</tr>
</table>
<script>
function fff(){
var obj=document.getElementById("btn2");
obj.setAttribute("onclick","show()");
}
function show(){
alert('ss');
}
</script>