Con el objetivo de continuar nuestro aprendizaje de Mootools, ahora vamos a ver cómo se podrían crear elementos dinámicamente en la página web. Este artículo se encaja en el Manual de Mootools, que estamos publicando en DesarrolloWeb.com. En capítulos anteriores ya comenzamos a explicar las características del módulo Element, que sirve para trabajar con los elementos de la página.

Cuando nos referimos a los elementos de la página, abarcamos cualquier tipo de contenido de ésta. Por ejemplo, los párrafos son elementos, las imágenes o cualquier otra cosa que coloquemos con etiquetas HTML. Las listas, por ejemplo, también son elementos. La propia lista es un elemento (etiqueta UL u lo), pero también son elementos cada uno de los item de la lista (etiqueta LI). Así pues, podemos entender la página como un conjunto de elementos colocados de manera secuencial.

Con Mootools tenemos acceso a cualquiera de estos elementos y podemos trabajar con ellos de manera dinámica. Esto incluye, modificar sus propiedades, crearlos, borrarlos, etc. Para trabajar con un elemento de la página tan solo tenemos que poder referirnos a él y para ello utilizábamos su identificador (atributo id). Para conseguir una instancia de la clase Element de un elemento de la página a partir de un identificador utilizábamos la función dólar, relatada en el artículo anterior.

Así que después de esta introducción a lo que son los elementos de la página, vamos ya con los objetivos a cubrir en este artículo de desarrollo web.com. No son otros que crear elementos dinámicamente, como respuesta a ejecución de sentencias Javascript. En adelante veremos también cómo insertarlos en la página, para que aparezcan en el lugar que nosotros deseemos.

Constructor de Element

La clase Element de Mootools tiene un constructor que sirve para realizar las tareas de creación de un elemento nuevo, a la vez que nos ofrece herramientas para su inicialización. El constructor es muy sencillo y recibe dos parámetros, como podemos ver a continuación:

miElemento = new Element(etiqueta, caracteristicas);

Los parámetros del constructor son los siguientes:

Etiqueta: es el nombre de una etiqueta HTML. Por ejemplo si ponemos “p” estaremos creando un elemento tipo párrafo, o si colocamos “img” estaremos creando un elemento o etiqueta imagen.
Características: son una lista de características de la etiqueta o elemento que se está creando. Estas características son opcionales.

Por ejemplo, podemos construir elementos de esta manera:

Construyo un elemento párrafo, etiqueta P:

var nuevoElemento = new Element ("p");

Construyo un elemento enlace, etiqueta A, y aparte le doy una serie de características del enlace, para inicializar el texto del enlace, la URL a la que va dirigido, y algunos estilos CSS.

var otroElemento = new Element("a", {
   "html": "texto del enlace",
   "href": "url_del_enlace",
   "styles": {
      "background-color": "red",
      "color": "white"
   }
});

Al construir un elemento este simplemente se genera internamente en la memoria con Javascript, pero no aparece en ningún lugar de la página. Para incluirlo en la página tendremos que insertar el elemento, o inyectarlo, como prefiramos decirlo. Todo esto lo veremos en un par de ejemplos en el siguiente artículo.