AplicacionesWeb

Original de jourmoly.com.ar

En este artículo explicare los métodos para mover, insertar, cambiar y borrar elementos del DOM de nuestras páginas con ayuda de Mootools. También prepare un par de ejemplos que los puedes ver desde aquí o bajártelos desde aquí.

injectBefore

Inserta un elemento antes del elemento que pasamos por parámetro. Dicho parámetro puede ser el id de un elemento o directamente su referencia.

var elemento = new Element('div', {'id':'MiElemento'}); elemento.injectBefore('otroElemento');

En este caso creamos un elemento (div) y lo insertamos antes que nuestro otro div. También podríamos haber tomado cualquier otro elemento de nuestra pagina y hacer lo mismo, sin tener que crearlo como en el ejemplo anterior.

$('MiElemento').injectBefore('otroElementoMas');

En este caso, MiElemento desaparecerá de donde estaba y se colocará por delante de otroElementoMas.

injectAfter

Como injectBefore, pero inserta seguido al elemento pasado por parámetro.

var elemento = new Element('div', {'id':'MiElemento'}); elemento.injectAfter('otroElemento');

injectInside

Como injectBefore, pero inserta dentro del elemento pasado por parámetro, al final.

var elemento = new Element('div', {'id':'MiElemento'});elemento.injectInside('otroElemento');

injectTop

Como injectInside, pero inserta dentro del elemento pasado por parámetro, al principio.

var elemento = new Element('div', {'id':'MiElemento'});  

elemento.injectTop('otroElemento');

adopt

Adopt funciona similar a injectInside, con la diferencia que nos permite insertar uno o varios elementos dentro de otro. Se puede indicar que elementos insertar con un id, un arreglo de ids, un arreglo de elementos o lo que es lo mismo usando $$ y selectores CSS.

var elemento = new Element('div', {'id':'MiElemento'});  

$('otroElemento').adopt(elemento);  

//indicamos directamente el elemento a insertar

Un ejemplo usando ids:

$('destino').adopt(['otroElementoMas', 'MiElemento']);

Un ejemplo usando selectores:

$('destino').adopt($$('#origen li'));  

//Todos los li dentro de #origen

remove

Nos permite remover elementos.

$('otroElementoMas').remove();

Clone

Nos permite copiar elementos. Podemos indicar mediante un parámetro si deseamos que se copien los elementos hijos del elemento que estamos copiando(true) o no(false). Predeterminado, true.

var elemento = $('otroElemento').clone();  

$('destino').adopt(elemento);

Indicando false:

var elemento = $('otroElemento').clone(false);  

$('destino').adopt(elemento);

Nota: Olviden por un momento que no está bien repetir los ids, fue solo para seguir la linea de los ejemplos.

replaceWith

Reemplazamos un elemento con otro.

var elemento = new Element('div', {'id':'MiElemento'});  

$('otroElementoMas').replaceWith(elemento);

Es todo por hoy, pero quedan varios métodos mas por explicar, será en la tercer parte de este artículo. No olvides mirar los ejemplos .

Articulos relacionados: