Este es el segundo artículo de Como crear elementos con mootools, el primero podéis acceder aquí.
En el primer artículo ya vimos como crear un elemento sencillo como puede ser un tag A, DIV, IMG, etc. hasta uno algo más complejo como SELECT por el cual necesitábamos de un bucle para recorrerlo.
En este artículo explicaré un poco los métodos que hay y que podemos hacer con ellos.

Los métodos para insertar un elemento son los siguientes:

• - injectBefore: Inserta el elemento antes del indicado en el parámetro
• - injectAfter: Inserta el elemento después del indicado
• - injectTop: Insertamos arriba del elemento que indiquemos
• - injectInside: Insertamos al final del elemento indicado

miElemento = new Element('div', { 'id': 'miElemento', 'html': 'Al insertar con injectInside, se colocará al final' });
miElemento.injectInside($('elementoDestino')); //Inserta miElemento al final del elementoDestino

Esto en HTML se podría traducir de la siguiente manera:

• miElemento es una etiqueta DIV con texto dentro, etc.
• elementoDestino es otro div que contiene otros div y estiquetas
• Después de ejecutar el JavaScript, quedaría asi:

<div id="elementoDestino">
  <p>1er parágrafo</p>
  <p>2on parágrafo</p>
  <div class="miClase">1er layer</div>
  <div id="miElemento">Al insertar con injectInside, se colocará al final</div>
</div>

Antes de la ejecución del JavaScript, no teníamos ese div, y ahora gracias al DOM, hemos insertado un DIV dentro de otro al final del mismo.

Métodos para la entrada y salida (getters y setters):

• - get(string): Recibimos el valor del atributo que pasamos por parámetro, ejemplo: $('miElemento').get('id'), recibimos el nombre de su ID
• - set(string, value): Insertamos un valor al atributo que le pasamos, ejemplo: $('miElemento').set('id', 'otroElemento'), con eso cambiamos el valor de la ID
• - getPoperty(string): Es un alias de get por lo que puede hacer prácticamente lo mismo / Podemos recibir varios atributos a la vez de un elemento
• - setPoperty(string, value) / setPoperties: Es un alias de set / Podemos pasar varios atributos a la vez a un elemento
• - getNext, getFirst, getLast, getParent, etc.: Estos métodos y otros similares realizan mediante DOM una búsqueda sobre los elementos que hay antes, después, etc. del elemento que indiquemos. Supongamos que tenemos un elemento del tipo INPUT type="submit" y queremos acceder al elemento FORM, usaremos getParent('form').

Varios ejemplos con la entrada y salida de atributos de un elemento:

$('miElemento').set('html', 'Esto es <b>código HTML</b> y se insertará dentro del "miElemento", pero <i>OJO</i> si contenia algo, se perderá.');
var temp = $('miElemento').getProperties('tag', 'id', 'html'); //Esto devolverá el TAG="div", la id="miElemento" y todo el contenido dentro de este DIV mediante HTML
$('miElemento').setProperties({
 'html': 'esto introducirá código HTML dentro de "miElemento" a demás de las siguientes propiedades',
 'title': 'título para este DIV',
 'class': 'miClase'
});

Aquí finalizo este artículo sobre como crear elementos con mootools, en el próximo hablaré sobre eliminar contenido, borrar elementos y algunos ejemplos prácticos sobre los 3 artículos.