El DOM y Mootools

Podés ver la explicación completa sobre Mootools y el DOM en mi blog, donde también podrás encontrar mas información, ejemplos y tutoriales sobre Mootools en Castellano como asi también sobre algunos otros temas.

Suscribite a mi blog para recibir articulos directamente en tu lector de Feeds favorito.

injectBefore

  1. $('en-1').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	//Creamos un elemento li
  5. 	var elemento = new Element('div', {'class':'hijos'});
  6. 	//Le agregamos texto
  7. 	elemento.appendText('Inserta antes');
  8. 	//lo insertamos 
  9. 	elemento.injectBefore('el-1');
  10. });
Mi Elemento 1
Probar

injectAfter

  1. $('en-2').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var elemento = new Element('div', {'class':'hijos'});
  5. 	elemento.appendText('Inserta despues');
  6. 	elemento.injectAfter('el-2');
  7. });
Mi Elemento 2
Probar

injectInside

  1. $('en-3').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var elemento = new Element('li');
  5. 	elemento.appendText('Inserta adentro al final');
  6. 	elemento.injectInside('el-3');
  7. });
  1. Mi Lista 1
Probar

injectTop

  1. $('en-4').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var elemento = new Element('li');
  5. 	elemento.appendText('Inserta adentro al principio');
  6. 	elemento.injectTop('el-4');
  7. });
  1. Mi Lista 2
Probar

adopt

  1. $('en-5').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('el-5').adopt($$('#el-4 li'));
  5. 	//Todos los li de el-4
  6. });
  1. Mi Lista 3
Probar

clone

  1. $('en-6').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var elemento = $('el-6').clone();
  5. 	elemento.injectInside('el-7');
  6. });
Mi Elemento 6
Mi Elemento 7
Probar 
  1. $('en-7').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var elemento = $('el-8').clone();
  5. 	elemento.injectInside('el-9');
  6. });
Mi Elemento 8
Y otro elemento
Mi Elemento 9
Probar 
  1. $('en-8').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	var elemento = $('el-10').clone(false);
  5. 	//Indicamos false para que no se copien los "hijos" de el-10, incluso su texto tampoco se copiara
  6. 	elemento.injectInside('el-11');
  7. });
Mi Elemento 10
Y otro elemento
Mi Elemento 11
Probar

replaceWith

  1. $('en-9').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	//reemplazamos el-12 por el-13
  5. 	$('el-12').replaceWith('el-13');
  6. });
Mi Elemento 12
Mi Elemento 13
Probar