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.
1
| <div id="otroElemento"></div> |
1
2
| var elemento = new Element('div', {'id':'MiElemento'});
elemento.injectBefore('otroElemento'); |
1
2
| <div id="MiElemento"></div>
<div id="otroElemento"></div> |
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.
1
| $('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.
1
| <div id="otroElemento"></div> |
1
2
| var elemento = new Element('div', {'id':'MiElemento'});
elemento.injectAfter('otroElemento'); |
1
2
| <div id="otroElemento"></div>
<div id="MiElemento"></div> |
injectInside
Como injectBefore, pero inserta dentro del elemento pasado por parámetro, al final.
1
2
3
| <div id="otroElemento">
<div id="otroElementoMas"></div>
</div> |
1
2
| var elemento = new Element('div', {'id':'MiElemento'});
elemento.injectInside('otroElemento'); |
1
2
3
4
| <div id="otroElemento">
<div id="otroElementoMas"></div>
<div id="MiElemento"></div>
</div> |
injectTop
Como injectInside, pero inserta dentro del elemento pasado por parámetro, al principio.
1
2
3
| <div id="otroElemento">
<div id="otroElementoMas"></div>
</div> |
1
2
| var elemento = new Element('div', {'id':'MiElemento'});
elemento.injectTop('otroElemento'); |
1
2
3
4
| <div id="otroElemento">
<div id="MiElemento"></div>
<div id="otroElementoMas"></div>
</div> |
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.
1
2
3
| <div id="otroElemento">
<div id="otroElementoMas"></div>
</div> |
1
2
3
| var elemento = new Element('div', {'id':'MiElemento'});
$('otroElemento').adopt(elemento);
//indicamos directamente el elemento a insertar |
1
2
3
4
| <div id="otroElemento">
<div id="otroElementoMas"></div>
<div id="MiElemento"></div>
</div> |
Un ejemplo usando ids:
1
2
3
4
5
6
| <div id="otroElemento">
<div id="otroElementoMas"></div>
<div id="MiElemento"></div>
</div>
<div id="destino">
</div> |
1
| $('destino').adopt(['otroElementoMas', 'MiElemento']); |
1
2
3
4
5
6
| <div id="otroElemento">
</div>
<div id="destino">
<div id="otroElementoMas"></div>
<div id="MiElemento"></div>
</div> |
Un ejemplo usando selectores:
1
2
3
4
5
6
7
8
9
| <ul id="origen">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ul>
<ul id="destino">
</ul> |
1
2
| $('destino').adopt($$('#origen li'));
//Todos los li dentro de #origen |
1
2
3
4
5
6
7
8
9
| <ul id="origen">
</ul>
<ul id="destino">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ul> |
remove
Nos permite remover elementos.
1
2
3
| <div id="otroElemento">
<div id="otroElementoMas"></div>
</div> |
1
| $('otroElementoMas').remove(); |
1
2
| <div id="otroElemento">
</div> |
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.
1
2
3
4
5
| <div id="otroElemento">
<div id="otroElementoMas"></div>
</div>
<div id="destino">
</div> |
1
2
| var elemento = $('otroElemento').clone();
$('destino').adopt(elemento); |
1
2
3
4
5
6
7
8
| <div id="otroElemento">
<div id="otroElementoMas"></div>
</div>
<div id="destino">
<div id="otroElemento">
<div id="otroElementoMas"></div>
</div>
</div> |
Indicando false:
1
2
3
4
5
| <div id="otroElemento">
<div id="otroElementoMas"></div>
</div>
<div id="destino">
</div> |
1
2
| var elemento = $('otroElemento').clone(false);
$('destino').adopt(elemento); |
1
2
3
4
5
6
| <div id="otroElemento">
<div id="otroElementoMas"></div>
</div>
<div id="destino">
<div id="otroElemento"></div>
</div> |
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.
1
2
3
| <div id="otroElemento">
<div id="otroElementoMas"></div>
</div> |
1
2
| var elemento = new Element('div', {'id':'MiElemento'});
$('otroElementoMas').replaceWith(elemento); |
1
2
3
| <div id="otroElemento">
<div id="MiElemento"></div>
</div> |
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 .
Popularity: 4% [?]
Otros artículos
September 7, 2007 a las 3:29 am
Gracias por el tutorial! Así si que se entienden las cosas y no con la documentación oficial de MooTools que, para mi, es una patata
Saludos.
September 7, 2007 a las 11:18 am
jajajjajajaj bueno ami parecer la documentacion de mootools es para personas que tienen un conocimiento basico de esto. Ahora ke he visto tanto ejemplos en esta pagina y explicaciones de como se hacen las cosas y el porke de las mismas, cuando voy a ver esa documentacion de moo se me hace mas facil entender las cosas.
Saludos federico, excelente explicacion….
September 7, 2007 a las 2:56 pm
Bueno, me alegro mucho que les gusten las explicaciones, intento mantenerlas lo mas simples que se pueda. De a poco estoy haciendo un repaso total a la documentacion oficial.
Saludos
May 7, 2008 a las 4:36 am
[...] Inserción y remoción de contenidos. [...]
June 19, 2008 a las 3:16 pm
Hola de nuevo, jourmoly!
mira, estoy tratando de clonar parte de un formulario con MooTools 1.2, pero como al clonar crea una copia con las mismas ID’s no me sirve al enviar el formulario, ahora, como puedo hacer para que los inputs clonados tengan una ID como autor-1, autor-2, etc?
te dejo la parte del formulario en pastebin http://pastebin.com/d62357607
November 25, 2009 a las 4:27 pm
Hola,
¿Están publicadas la primera y tercer parte de este tutorial?
Excelente información
Saludos
November 25, 2009 a las 5:26 pm
Hola Luis,
Si están publicados:
Aquí están las otras partes.