Agregar campos a un form con Javascript vía DOM

Resulta que tenía que hacer un archivo html donde hubiera un form y donde un usuario pudiera ir agregando campos si es necesario… como cuando adjuntas un archivo en Gmail.

Con mis limitadísimos conocimientos de Javascript, usé la razón y la razón me llevó hasta esta página: ./with imagination donde encontré la forma de cumplir mi cometido.

Después de modificarlo un poco, terminé utilizando solo la parte base del código:

	var Dom = {
		get: function(el) {
			if (typeof el === 'string') {
				return document.getElementById(el);
			} else {
				return el;
			}
		},
		add: function(el, dest) {
			var el = this.get(el);
			var dest = this.get(dest);
			dest.appendChild(el);
		}
	};
	var Event = {
		add: function() {
			if (window.addEventListener) {
				return function(el, type, fn) {
					Dom.get(el).addEventListener(type, fn, false);
				};
			} else if (window.attachEvent) {
				return function(el, type, fn) {
					var f = function() {
						fn.call(Dom.get(el), window.event);
					};
					Dom.get(el).attachEvent('on' + type, f);
				};
			}
		}()
	};

Modifiqué la implementación que viene en la página original, donde genera un párrafo, en mi caso necesitaba que generara algunos campos de un form dentro de una tabla. También cambié la propiedad innerHTML, pues no es una propiedad estándar, sino de Microsoft y terminé con el siguiente código.

Event.add(window, 'load', function() {
		/* La variable i la concateno con el nombre del campo para generar
		nombres de campo diferente, se generan asi: campo1, campo2,
		campo3, campo4... campoN */
		var i = 1;
		Event.add('add-element', 'click', function() {
			// Creacion de los elementos tr, td e input
			var el = document.createElement('tr');
			var elCont = document.createElement('td');
			var elCont2 = document.createElement('td');
			var elInput = document.createElement('input');
			var elInput2 = document.createElement('input');

			var el2 = document.createElement('tr');
			var elCont3 = document.createElement('td');
			var elCont4 = document.createElement('td');
			var elInput3 = document.createElement('input');
			var elInput4 = document.createElement('input');

			// Creacion de los textos (labels) de cada input
			var ecLbl = document.createElement('label');
			var ecLbl2 = ecLbl.cloneNode(true)
			var ecLbl3 = ecLbl.cloneNode(true)
			var ecLbl4 = ecLbl.cloneNode(true)

			var ecText = document.createTextNode('Nombre ');
			var ec2Text = document.createTextNode('Apellidos ');
			var ec3Text = document.createTextNode('Ciudad ');
			var ec4Text = document.createTextNode('Pais ');

			ecLbl.appendChild(ecText);
			ecLbl2.appendChild(ec2Text);
			ecLbl3.appendChild(ec3Text);
			ecLbl4.appendChild(ec4Text);

			// Aplico los tipos y nombres de los input
			elInput.type = 'text';
			elInput.name = 'campo'+ i++;
			elInput2.name = 'campo'+ i++;
			elInput2.type = 'text';

			elInput3.type = 'text';
			elInput3.name = 'campo'+ i++;
			elInput4.name = 'campo'+ i++;
			elInput4.type = 'text';

			// Inserto cada input y cada texto dentro del td
			elCont.appendChild(ecLbl);
			elCont.appendChild(elInput);
			elCont2.appendChild(ecLbl2);
			elCont2.appendChild(elInput2);

			elCont3.appendChild(ecLbl3);
			elCont3.appendChild(elInput3);
			elCont4.appendChild(ecLbl4);
			elCont4.appendChild(elInput4);

			// inserto cada td dentro de el tr
			el.appendChild(elCont);
			el.appendChild(elCont2);

			el2.appendChild(elCont3);
			el2.appendChild(elCont4);

			// inserto los tr en el DOM
			Dom.add(el, 'content');
			Dom.add(el2, 'content');
		});
	});

Recuento:

• Mira el resultado final
• OJO: para que funcione en Internet Explorer, hay que hacer un HTML bien marcado o semántico
• Aprendí algunas propiedades del DOM que no conocía, de hecho nunca había nada con javascript y DOM
• Terminé haciendo una sopa de objetos (debí reutilizar algunos bloques), pero bueno, ya terminé de experimentar y ahora hay que mejorarlo