Inicio JavaScript Crear elementos dinamicamente

Crear elementos dinamicamente

Jueves, 31-03-2011 17:39 - Leer comentarios - Comentar

Vamos a ver la forma de crear elementos dinámicamente. Aunque en el ejemplo se habla de un caso muy habitual, crear input del tipo file para que el usuario vaya eligiendo archivos, puede hacerse también con cualquier elemento HTML.
Os pongo el ejemplo, con un enlace para que lo veais funcionado, y comentamos algunas líneas de código:
Texto plano

 

Crear input file
1- Elegimos el objeto donde se van a crear o borrar los elementos, en este caso es un fieldset.
2- Creamos un elemento, un div que va a contener a los demás elementos creados y lo asignamos a la variable contenedor.
3- Le damos un id que servirá para, si es necesario, poder borrarlo.
4- Añadimos con appendChild el elemento que acabamos de crear al fieldset.
5- Creamos otro elemento, en este caso es un input.
6- Indicamos el tipo de input que queremos: file o button y un name para que cuando mandemos los datos del formulario a otra página, podamos recoger el valor introducido.
7- Añadimos el botón que hemos creado al contenedor creado anteriormente.
8- A este botón le asignamos un value y un name. También se podría añadir al input file (te hará falta para recogerlo en la página que procese el formulario) pero en el ejemplo no es necesario.
9- Asignamos al evento onclick del botón la función borrar y el pasamos como parámetro el nombre del propio botón.
10- Utilizamos removeChild para eliminar el div con todo lo que tiene dentro. Os habreis fijado que el name del botón y el id del div son iguales.
Los que hallais visto el código funcionando, os parecerá que no queda demasiado bien que los nuevos elementos se coloquen debajo del botón "Crear", sería mejor que se colocaran encima. Supongo que es cuestión de gustos, pero solucionarlo es muy sencillo.
Habeis visto que hemos mandado un parámetro (onclick="crear(this)") y lo hemos recogido en la función (function crear(obj)) pero luego no lo hemos utilizado para nada. Pues ahora es el momento de hacerlo para añadir el contenedor delante del botón "Crear" utilizando insertBefore, la línea 4 quedaría así:
Texto plano
fi.insertBefore(contenedor,obj); // 4

Tags

crear, elementos, dinamicamente, javascript

Comentarios

Bobbo - Martes, 08-11-2011 12:20

Superb ifnormtaoin here, ol'e chap; keep burning the midnight oil.


No se permiten comentarios en este momento.