Vamos a realizar un pequeña practica en Javascript para manipular el DOM. Lo único que necesitas es un conocimiento basico de HTML, CSS y Javascript.
La idea es implementar una pequeña aplicación que registre un dato y lo imprima en pantalla en forma de lista. Básicamente esto es lo que queremos:
Simple cuando hagamos click en el botón, lo que sea que este en el campo de texto, se agregara a la lista. En el área derecha tomaremos el dato y en el lado izquierdo se lo mostraremos al usuario.
Implementando la Interfaz
Necesitamos un div que centre el contenido, dentro de el dos columnas, una para el formulario y otra para mostrar la lista. Este el código HTML:
Veamos ahora como estilizamos este contenido con el CSS:
Bastante sencillo, hasta aquí.La font Open Sans es una font de Google, para usarla deben incluir esto:
[color=#000000]
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
[/color]
Implementacion Javascript
Lo primero que tenemos que hacer es obtener los elementos HTML, el campo de texto, que contendra el dato ingresado y el botón, al cual le asignaremos un evento o una tarea para cuando este sea clickeado.
Este código no funcionara en IE, porque no estoy usando attachEvent, pero tu puedes completar esta tarea. La función cargarElemento es la siguiente:
En elementData almacenamos el valor contenido en la caja. Creamos un elemento HTML li, donde luego agregaremos elementData, y luego a li lo agregaremos al elemento ul donde formamos la lista.
Acá el código javascript completo:
Eso es todo espero que les sirva como practica, pueden completarlo verificando que el dato no sea vacio y agregar una opcion para poder borrar un elemento de la lista.
¿Por que no usaste jQuery?
No use jQuery porque para este caso no es necesario. El código si bien no funcionara en IE, se puede crear una función que trabaje con addEventListener o attachEvent dependiendo del navegador.
Demo
