js中动态添加时间文本框，导致控件无效

Question

首先是页面加载时，会加载一个时间文本控件：<input name='PROCESSINGTIME' type='text' id='date' contenteditable='false' class='inputText' ztype='Date' size='14' />
之后我要点击一个客户端的"+"来添加一个时间文本框，也就是和开始加载的一样，但是没有效果，因为不是刷新页面，样式和脚本丢失，怎么解决呢

Answer 1

    <input id="add" type="button" value="+" />
    <script type="text/javascript">
        document.getElementById("add").onclick=function(){
            var txt = document.createElement("input");
            txt.type="text";
            txt.name="PROCESSINGTIME";
            txt.id="date2";
            txt.contenteditable="false";
            txt.className="inputText";
            txt.ztype="Date";
            txt.size="14";
            document.body.appendChild(txt);
        }
    </script>

Answer 2

 this.lblFILEBUSINESSID.Text += "<table id='t2' border='0' cellspacing='0' cellpadding='0'><tr><td>&nbsp;&nbsp;审核时间 <input name='PROCESSINGTIME' type='text' id='date1' contenteditable='false' class='inputText'  ztype='Date' size='14' /></td><td>" +
                    "<input type='button' value='+' class='conbtn' onclick='insertRow1()' /><input type='button' value='-' class='conbtn' onclick='deleteRow1()' /></td></tr></table>";
后台是这样添加的，前台的JS是
   var i = 1;
   function deleteRow1() { //删除最后一行
       var t2 = document.getElementById('t2');
       var rows = t2.rows;
       if (rows.length >= 2) {
           t2.deleteRow(rows.length - 1);
           i--;
       }
   }
   function insertRow1() { //在最后一行添加一行
       i++;
       var t2 = document.getElementById('t2');
       var rows = t2.rows;
       var newRow = t2.insertRow(rows.length);
       newRow.insertCell(0).innerHTML = "<%=aa() %>";
       newRow.insertCell(1).innerHTML = "&nbsp;&nbsp;审核时间 <input name='PROCESSINGTIME' type='text' id='date"+i+"' contenteditable='false' class='inputText' ztype='Date' size='14' />";
       newRow.insertCell(2).innerHTML = "&nbsp;";
   }
现在就是要用后台生成的"+"来添加一个和后台生成的时间文本框一样的文本框 

Answer 3

我想了个办法，是隐藏一个时间控件，这样就加载好了，然后复制这个控件的节点<input> 我只获取的object了，怎么转成<input>这样的文本