añadiendo cuadros de texto dinámicamente a un formulario con el clic de un botón

Question

Soy un programador de php. Tengo un formulario de entrada de usuario en el que una persona debe poder agregar tantos cuadros de texto (para ingresar varios ID de correo electrónico) como desee con el clic de un botón. Hace clic en el botón por primera vez, se agrega un cuadro de texto adicional. Hace clic en el botón por segunda vez, se agrega otro cuadro de texto ... y así sucesivamente.

Answer 1

Puede crear elementos a través de document.createElement, y los añade a un formulario a través de appendChild, así:

var textbox = document.createElement('input'); 
textbox.type = 'text'; 
document.getElementById('theForm').appendChild(textbox); 

(que asume la forma tiene un id = "theForm", pero se puede obtener la referencia a . la forma de otras maneras)

Si desea envolverlo en una etiqueta, que es fácil, también:

var label, textbox; 
label = document.createElement('label'); 
label.appendChild(document.createTextNode('Another email address: ')); 
textbox = document.createElement('input'); 
textbox.type = 'text'; 
label.appendChild(textbox); 
document.getElementById('theForm').appendChild(label); 

Live example

Si superas las especificaciones de DOM (DOM Core 2 es el más ampliamente admitido en la actualidad, como es el HTML stuff en la parte superior; DOM Core 3 es conseguir algún apoyo ahora), encontrará otras cosas que puede hacer   — como inserting en la forma en el medio en lugar de anexar al final, etc.

mayoría de las veces, se puede utilizar para innerHTML agregar a las estructuras DOM (es compatible con todos los principales navegadores, y se está estandarizando como parte de HTML5), pero hay algunos caprichos del navegador en los campos de formulario, específicamente, por lo que he ido con la interfaz DOM anterior.

---

No ha dicho que está utilizando una biblioteca, por lo que lo anterior es puro JavaScript + DOM. Es bastante simple, pero en el uso del mundo real puede tener complicaciones rápidamente. Ahí es donde una biblioteca de JavaScript como jQuery, Prototype, YUI, Closure o any of several others puede ahorrarle tiempo, suavizando las diferencias y complicaciones del navegador, permitiéndole concentrarse en lo que realmente está tratando de hacer.

Por ejemplo, en el ejemplo los vinculados, que tuvo que proporcionar una función de hookEvent para manejar el hecho de que algunos navegadores utilizan el (normalizado) addEventListener función, mientras que IE antes de IE9 utiliza attachEvent lugar. Y las bibliotecas se encargará de las peculiaridades de campos de formulario que estaba hablando, que le permite especificar los campos usando HTML puro, como esto:

Usando jQuery:

$("#theForm").append("<label>Another email address: <input type='text'>"); 

Live example

Usando Prototype:

$("theForm").insert("<br><label>Another email address: <input type='text'>"); 

Live example