Veamos un ejemplo donde podemos utilizar esta herramienta, supongamos que necesitamos ingresar nuestro nombre y el nombre de nuestros hijos. Podemos sin duda disponer un control de tipo text para el ingreso de nuestro nombre y varios otros controles de tipo text para los nombres de los hijos (¿pero cuántos?)

Podemos solucionar esta situación disponiendo un botón para crear un elemento de tipo input cada vez que sea presionado.
pagina.html

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
var cantidad = 0;
function agregarHijo() 
{
  cantidad++;
  var nuevohijo = document.createElement('input');
  nuevohijo.type = 'text';
  nuevohijo.name = 'nombre' + cantidad;
  nuevohijo.id = 'nombre' + cantidad;
  document.getElementById('fs').appendChild(nuevohijo);
  document.getElementById('fs').appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<form method="post" action="#">
Ingrese su nombre:
<input type="text" name="nombre" id="nombre"><br>
<fieldset id="fs">
<legend>Ingrese los nombres de sus hijos</legend>
<input type="button" onclick="agregarHijo()" value="Presione el botón para agregar un hijo.">
<br>
</fieldset>
<input type="submit" value="Registrar">
</form>
</body>
</html>

Ver ejemplo anterior

El código javascript.

var cantidad = 0;
function agregarHijo() 
{
  cantidad++;
  var nuevohijo = document.createElement('input');
  nuevohijo.type = 'text';
  nuevohijo.name = 'nombre' + cantidad;
  nuevohijo.id = 'nombre' + cantidad;
  document.getElementById('fs').appendChild(nuevohijo);
  document.getElementById('fs').appendChild(document.createElement('br'));
}

Algunas consideraciones que debemos tener en cuenta son:
La definición de una variable global contador, que nos permite definir para las propiedades name y id nombres distintos:

var cantidad = 0;

La función agregarHijo, incrementa el contador y crea un nodo de tipo elemento:

  cantidad++;
  var nuevohijo = document.createElement('input');

Seguidamente, inicializamos las propiedades type, name y id:

  nuevohijo.type = 'text';
  nuevohijo.name = 'nombre' + cantidad;
  nuevohijo.id = 'nombre' + cantidad;

Luego obtenemos la referencia del elemento fieldset y le añadimos el elemento que acabamos de crear:

  document.getElementById('fs').appendChild(nuevohijo);

Por último, creamos un nodo elemento de tipo br y lo añadimos también al fieldset para que cada control text se muestre uno debajo de otro:

  document.getElementById('fs').appendChild(document.createElement('br'));

Tengamos en cuenta que cuando se presiona el botón registrar no sucede nada ya que no definimos una página en el servidor que procese los datos del formulario (esto lo verá si estudia PHP PHP )

(adsbygoogle = window.adsbygoogle || []).push({});

Creación de controles de tipo input dinámicamente.