Añadiendo elementos al DOM con Javascript: appendChild e insertBefore

Una de las funcionalidades potentes de Javascript es poder generar nuevo código dinámicamente y añadirlo a nuestra web, cosa que podemos hacer con las funciones appendChild e insertBefore.

El método appendChild nos permite insertar un elemento dentro de otro, al final del mismo. Imagina que quieres agregar un elemento a una lista que sea “nuevo elemento“, pues javascript permite crear este nuevo elemento, meterle un nodo de texto y agregarlo a la lista. Veamos como:

elemento1 = document.createElement('li');
elemento1.appendChild(document.createTextNode('nuevo elemento'));
elemento2 = document.getElementById('laListaQueYaExiste');
elemento2.appendChild(elemento1);

¿Y si quieres insertar al principio en lugar de al final de la lista? Pues tan simple como usar insertBefore:

elemento1 = document.createElement('li');
elemento1.appendChild(document.createTextNode('nuevo elemento'));
elementoLista = document.getElementById('laListaQueYaExiste');
//hasta aquí todo igual
elemento2 = elementoLista.firstChild();
//en la línea de arriba creamos un elemento nuevo que es el primer elemento de la lista.
elemento3.parentNode.insertBefore(elemento1,elemento3);
//también podríamos haberlo hecho así:
elementoLista.insertBefore(elemento1,elemento3);
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s