Cómo crear <input type = "text" /> dinámicamente

Question

Quiero crear un texto tipo de entrada en mi formulario web de forma dinámica. Más específicamente, tengo un campo de texto donde el usuario ingresa la cantidad de campos de texto deseados; Quiero que los campos de texto se generen dinámicamente de la misma forma.

¿Cómo puedo hacer eso?

Answer 1

con 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

Tal vez el método document.createElement(); es lo que estás buscando.

Answer 3

Puede hacer algo como esto en un bucle en función del número de campos de texto que ingresen.

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

Pero para un mejor rendimiento crearía todo el html primero y lo inyectaría en el DOM una sola vez.

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

Edición este ejemplo se utiliza jQuery para añadir el html, pero se puede modificar fácilmente para utilizar innerHTML también.

Answer 4

Usted podría utilizar createElement() método para crear cuadro de texto que

Answer 5

Creo que el siguiente enlace le ayudará. Si desea generar campos dinámicamente y también desea eliminarlos al mismo tiempo, puede obtener la ayuda desde aquí. Tenía la misma pregunta, así que me dieron la respuesta

$(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 6

Ver esta respuesta para una solución no jQuery. ¡Solo me ayudó!

Adding input elements dynamically to form

Answer 7

uso de JavaScript, todo lo que necesita es document.createElement y setAttribute.

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

continuación, puede utilizar appendChild para añadir el elemento creado para el elemento de matriz deseada.

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