关于动态增加与动态删除页面元素的问题

createElement 方法:<html>
<body>
<script>
var tbl, tbody, tr, td, text, i, max;
max = 10;tbl = document.createElement("TABLE");
tbl.border = "1";tbody = document.createElement("TBODY");tbl.insertBefore(tbody, null);
document.body.insertBefore(tbl, null);
for (i=0; i<max; i++) {
tr = document.createElement("TR");
td = document.createElement("TD");
text = document.createTextNode("Text");
td.insertBefore(text, null);
tr.insertBefore(td, null);
tbody.insertBefore(tr, null);
}
</script>
</body>
</html>

解决方案 »

  1.   

    下拉列表:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY>
    <SELECT NAME="sel1"></SELECT><SCRIPT LANGUAGE="JavaScript">
    <!--
    var yourtext="text";
    var youvalue="value";
    var i=0;
    function addo(){
    var obj=document.all.sel1;
    obj.options.add(new Option( yourtext,yourvalue,true,true  )   );
    i++;
    }
    //-->
    </SCRIPT>
    <INPUT TYPE="button" onclick="addo()">
    </BODY>
    </HTML>
      

  2.   

    删除:
    删除
    function rem(){
    var obj=document.all.sel1;obj.options.remove( 0  );
     
    }
      

  3.   

    <script language = "javascript">
    function removeSeltBox(){
       var divContent = document.all["div_Area"].innerHTML;
       var recContent = divContent.substring(0,divContent.lastIndexOf("<SELECT"));
       document.all["div_Area"].innerHTML = recContent;
    }
    function addSeltBox(){
       var seltBox = "<select><option>下拉列表</option></select>";
       document.all["div_Area"].innerHTML += seltBox;
    }
    </script>
    <div id = "div_Area"></div>
    <input type = "button" value = "addBox" onclick = "javascript:addSeltBox()">
    <input type = "button" value = "removeBox" onclick = "javascript:removeSeltBox()">
    <input type = "button" value = "initIt" onclick = "javascript:document.all['div_Area'].innerHTML='';">
      

  4.   

    动态明细示例
    http://jkisjk.vip.sina.com/html/detailkeep2.htm