如何用JS添加文本框

1、比如我现在有一个表单，里面有两个文本框，下面有一个添加按钮：
  
  文本框1
  文本框2
  添加2、我要在点击“添加按钮”后在文本框2下面加多个文本框3，并且添加下移。  文本框1
  文本框2
  文本框3
  添加每次点击“添加按钮”都有2那样的功能。最好在提交表单的时候用JS验证文本框内容是否为空！

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <form id="t">
         <table id="table">
            <tr></td><input type="text" value="1" /></td></tr>
            <table>
            <input type="button" id="btn" value="提交" />
            <input type="button" id="new" value="新增" />
        </form>
        <script>
         document.getElementById('new').onclick = function(){
    var input = document.createElement('input');
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    td.appendChild(input);
    tr.appendChild(td);
    document.getElementById('table').appendChild(tr);
    };
    document.getElementById('btn').onclick = function(){
    var inps = document.getElementsByTagName('input'),
    len = inps.length,count = 0,arr = [];

    for(var i = 0; i < len; i++){
    if(inps[i].type == 'text'){
    arr.push(inps[i]);
    }
    }

    for(var i = 0; i < arr.length; i++){
    if(inps[i].value != ''){
    count++;
    }else{
    count--;
    }
    }

    if(count == arr.length){
    alert('提交')
    document.getElementById('t').submit();
    }else{
    alert('有空值')
    }
    };
        </script>
    </body>
    </html>
      

  2.   

    用createElement创建，设置属性，然后append到父元素下，或者用insertAdjacentHTML，此方法只支持IE，下面这insertHtml函数是兼容FF，chrome，opera没试过，应该也可以，效果和insertAdjacentHTML一样，验证是否为空么，获取文本框的内容，然后验证是否为空不就行了么function insertHtml(where, el, html){  
            where = where.toLowerCase();  
            if(el.insertAdjacentHTML){  
                switch(where){  
                    case "beforebegin":  
                        el.insertAdjacentHTML('BeforeBegin', html);  
                        return el.previousSibling;  
                    case "afterbegin":  
                        el.insertAdjacentHTML('AfterBegin', html);  
                        return el.firstChild;  
                    case "beforeend":  
                        el.insertAdjacentHTML('BeforeEnd', html);  
                        return el.lastChild;  
                    case "afterend":  
                        el.insertAdjacentHTML('AfterEnd', html);  
                        return el.nextSibling;  
                }  
                throw 'Illegal insertion point -> "' + where + '"';  
            } else {  
                var range = el.ownerDocument.createRange();  
                var frag;  
                switch(where){  
                     case "beforebegin":  
                        range.setStartBefore(el);  
                        frag = range.createContextualFragment(html);  
                        el.parentNode.insertBefore(frag, el);  
                        return el.previousSibling;  
                     case "afterbegin":  
                        if(el.firstChild){  
                            range.setStartBefore(el.firstChild);  
                            frag = range.createContextualFragment(html);  
                            el.insertBefore(frag, el.firstChild);  
                            return el.firstChild;  
                        }else{  
                            el.innerHTML = html;  
                            return el.firstChild;  
                        }  
                    case "beforeend":  
                        if(el.lastChild){  
                            range.setStartAfter(el.lastChild);  
                            frag = range.createContextualFragment(html);  
                            el.appendChild(frag);  
                            return el.lastChild;  
                        }else{  
                            el.innerHTML = html;  
                            return el.lastChild;  
                        }  
                    case "afterend":  
                        range.setStartAfter(el);  
                        frag = range.createContextualFragment(html);  
                        el.parentNode.insertBefore(frag, el.nextSibling);  
                        return el.nextSibling;  
                    }  
                    throw 'Illegal insertion point -> "' + where + '"';  
            }  
    } 
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
    <script>
        window.onload = function () {
            document.getElementById("btn_Add").onclick = function () {
                var input = document.createElement("INPUT");
                var div = document.createElement("DIV");
                div.appendChild(input);
                this.parentNode.firstChild.appendChild(div);
                var inputs = document.getElementsByTagName("INPUT");
                for (var i in inputs) {
                    //inputs[i]验证
                
                }
            }    }</script>
     </HEAD>
      <BODY>
     <div>
      <div><input type="text" /></div>
      <div><input type="text" /></div>
      </div>
       <button id="btn_Add">添加</button>
     </BODY>
    </HTML>-----------------------------新版老虎插件即将登场：
      

  4.   

    用Jquery实现比较简单
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="javascript1.5" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script language="javascript1.5" type="text/javascript">
    $().ready(function(){
    $("#btn").click(function(){
    $("#table").append("<tr></td><input type=\"text\" value=\"1\" /></td></tr>");
    });
    });
    </script>
    </head><body>
    <table id="table">
            <tr></td><input type="text" value="1" /></td></tr>
            <table>
            <input type="button" id="btn" value="提交" />
            <input type="button" id="new" value="新增" />

    </body>
    </html>