En el artículo anterior de nuestro Manual de Mootools publicado en DesarrolloWeb.com vimos cómo trabajar con el constructor de Element. Ahora vamos a aprender a poner en práctica la construcción de elementos y la inserción de los mismos en algún lugar de la página.

Esto lo veremos con un par de ejemplos. Para conocer mejor de antemano los objetivos del artículo podemos entrar a ver el resultado de los ejemplos en marcha.

Veamos un primer ejemplo de construcción de un elemento con Mootools y la posterior inserción del mismo en la página:

//construyo un nuevo elemento
var nuevoElemento = new Element ("div");
//Meto algo de texto dentro del elemento
nuevoElemento.set("html", "Este texto lo meto directamente desde Javascript");
//injecto ese elemento en la página
nuevoElemento.inject($("micapa"));


Con las anteriores líneas de código hemos hecho 3 cosas: Primero creamos un nuevo elemento, en este caso una etiqueta DIV. Luego he una llamada al método set() del Element, en el que asigno un poco de texto a la etiqueta. Con set() podemos asignar todo tipo de propiedades al elemento, entre ellas, con “html” asignamos el texto que hay dentro del mismo. Por último inyecto el elemento en la página. Para ello tengo que utilizar el método inject() indicando como parámetro el lugar donde se tiene que insertar el elemento, en este caso se mete el elemento dentro de otro elemento llamado “micapa”.

Supongamos que yo tenía este HTML (fíjate que el div tiene un id=”micapa” para referirme a él):

<div id="micapa">Crear Elementos con Mootools</div>

Pues después de la ejecución de estas sentencias de creación e inyección del nuevo elemento, me quedará la página con el siguiente código HTML:

<div id="micapa">
Crear Elementos con Mootools
<div>Este texto lo meto directamente desde Javascript</div>
</div>

Como vemos, con el método inject() de la clase Element se inserta el objeto que recibe el método, dentro del objeto Element que se indica como parámetro. Aunque inject() puede insertar los elementos en otros lugares, como veremos en el siguiente ejemplo.

Ahora vamos a mostrar un segundo ejemplo, un poco más elaborado. Se trata de insertar nuevos elementos a una lista que hay en la página. Es muy parecido al ejemplo anterior, con la salvedad que ahora vamos a utilizar algunas características adicionales del constructor de Element.

var nuevoElementoLista = new Element("li", {
   "html": "Texto del elemento",
   "styles": {
      "font-size": "14pt",
      "font-weight": "bold"
   }
});
nuevoElementoLista.inject($("lista"), "top");

Con la primera línea de código construyo un elemento LI (un elemento de lista). En este caso hemos utilizado el segundo parámetro del constructor de Element para especificar algunas características del elemento LI. Estas son: “html” para indicar el texto que va dentro de la etiqueta y “styles” para especificar algunos atributos de estilos CSS. Luego en la última línea se inyecta el elemento recién creado dentro de otro elemento con id=”lista”, pero en la parte de encima (por cambiar un poco, hemos utilizado un segundo parámetro del método inject() para decir “top”, con lo que conseguiremos que el elemento sea introducido arriba del todo de la lista).

Si teníamos un código HTML como este:

<ul id="lista">
<li>Elemento de lista 1</li>
<li>Otro elemento de lista</li>
</ul>

Después de la ejecución de estas líneas de código obtendremos un HTML resultante como este:

<ul id="lista">
<li style="font-size: 14pt; font-weight: bold;">Texto del elemento</li>
<li>Elemento de lista 1</li>
<li>Otro elemento de lista</li>
</ul>

Podemos ver ambos ejemplos relatados en este artículo de desarrollo web .com en el siguiente link:

Ver el ejemplo en marcha.