如何dynamic创build<input type =“text”/>

我想dynamic地在我的web表单中创build一个inputtypes的文本。 更具体地说，我有一个文本字段，用户input所需文本字段的数量; 我想要以相同的formsdynamic生成文本字段。

我怎么做？

Answer 1

使用JavaScript：

var input = document.createElement("input"); input.type = "text"; input.className = "css-class-name"; // set the CSS class container.appendChild(input); // put it into the DOM 

Answer 2

使用Javascript，你只需要document.createElement和setAttribute 。

 var input = document.createElement("input"); input.setAttribute('type', 'text'); 

然后，您可以使用appendChild将创build的元素追加到所需的父元素。

 var parent = document.getElementById("parentDiv"); parent.appendChild(input); 

Answer 3

也许方法document.createElement(); 是你在找什么。

Answer 4

您可以使用createElement()方法来创build该文本框

Answer 5

你可以根据input的文本字段的数目在循环中做这样的事情。

 $('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform'); 

但为了获得更好的性能，我会先创build所有的html，然后将其注入到DOM中一次。

 var count = 20; var html = []; while(count--) { html.push("<input type='text' name='name", count, "'>"); } $('#myform').append(html.join('')); 

编辑这个例子使用jQuery来附加html，但是你可以很容易地修改它以使用innerHTML。

Answer 6

我想下面的链接将帮助你。 如果您想要dynamic生成字段，并且希望同时删除它们，则可以从这里获得帮助。 我有同样的问题，所以我得到了答案

 $(function() { var scntDiv = $('#p_scents'); var i = $('#p_scents p').size() + 1; $('#addScnt').live('click', function() { $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); i++; return false; }); $('#remScnt').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); i--; } return false; }); }); 

http://jsfiddle.net/jaredwilli/tZPg4/4/

Answer 7

看到这个答案为非JQuery解决scheme。 刚帮我出去

dynamic添加input元素以形成