请教高手，javascript动态创建文本框问题

<form name=form1 method=post action=1.asp>
<input type= "button" onclick= "addItem()"  value= "ADD"/> 
  <script language= "javascript"> 
  function addItem() 
  {
 var temp=document.createElement("input"); 
     temp.type="text";
     temp.name="answer";
     document.body.appendChild(temp);
  } 
</script>
</form>
上述代码用户点击“add”按钮时可以在页面动态创建文本框，文本框的名字都一样，在asp页面里可以用for each in来接受用户输入的数据。问题一：创建的文本框好像不在form表单里，如何才能让自动生成的文本框在form表单里，这样可以在1.asp中接收用户在动态创建的文本框中输入的数据；问题二：这样创建的文本框都在同一行，如何让每个文本框都在不同行？

解决方案 »

  1.   

    js dom 操作是很灵活的，
    document.body.appendChild(temp); 这个是直接添加到body你还可以添加到一个任何容器，table div span 都可以
     要多行，可以是 table ，也可以是 div +css把这个table 放入 form表单 就可以了撒
      

  2.   

    要想能通过 ASP 服务端能取到，请把这些 input 放到 form 里，注意给你的 form 赋予一个 ID 为 form1 （方便取到它）  function addItem()  
      {
    var form=document.getElementById("form1"), temp=document.createElement("input");  
    temp.type="text";
    temp.name="answer";
    form.appendChild(temp); // 注意要给 form 赋 ID 为 form1

    // 想要换行，添加以下代码：
    form.appendChild(document.createElement('br'));
      }
      

  3.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    </head>
    <body>
    <form name="form1" method="post" action="1.asp">
    <input type= "button" onclick= "addItem()" value= "ADD"/>  
    </form>
    <script type= "text/javascript">  
    document.forms["form1"].children[0].onclick = function(){
    var temp = document.createElement("input"),
    br = document.createElement("br"); 
    this.parentNode.appendChild(br);
    temp.type = "text";
    temp.name = name;
    this.parentNode.appendChild(temp);
    }
    </script>
    </body>
    </html>
      

  4.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    </head>
    <body>
    <form name="form1" method="post" action="1.asp">
    <input type= "button" value= "ADD"/>  
    </form>
    <script type= "text/javascript">  
    document.forms["form1"].children[0].onclick = function(){
    var temp = document.createElement("input"),
    br = document.createElement("br"); 
    this.parentNode.appendChild(br);
    temp.type = "text";
    temp.name = name;
    this.parentNode.appendChild(temp);
    }
    </script>
    </body>
    </html>
      

  5.   

    我自己就不太喜欢用createElement，觉得麻烦，其实像多个换行什么的，这么简单的功能，就直接用innerHTML就好了。
      <form name=form1 id="myform" method=post action=1.asp>
      <input type= "button" onclick= "addItem()" value= "ADD"/>  
      <script language= "javascript">  
       function addItem(){
    var temp = document.createElement("input");  
    temp.type="text";
    temp.name="answer";
    document.myform.innerHTML += "<br/>";
    document.myform.appendChild(temp);
    }  
       </script>
      </form>
      

  6.   


    <form name="form1" method="post" action="1.asp">
    <input type= "button" onclick= "addItem()" value= "ADD"/>  
    <script type= "text/javascript">  
    function addItem()  
    {
    var temp=document.createElement("input");  
    temp.type="text";
    temp.name="answer";
    temp.style.display = "block";  //一行显示一个input
    document.form1.appendChild(temp);  //生成的文本框放在form里
    }  
    </script>
    </form>
      

  7.   

    你加在了BODY里面，当然不在FORM表单下了1、先获取FORM表单对象，比如在FORM设置个ID或者Document.Form[index]来获取都可以2、把创建的INPUT元素加到FORM对象下即可 例如:var myform = document.getElementById("myform");
    var input = document.ceateElement("input")
    input.type="text||hidden||radio||checkbox";
    myform.appendChild(input);