Continuamos con las explicaciones de la clase Element, enmarcadas en el Manual de Mootools que estamos publicando en DesarrolloWeb.com. A continuación vamos a ver otros métodos interesantes de la clase Element.

Método empty()

Este método sirve para eliminar los contenidos que haya dentro de un elemento de la página. Cuando nos referimos a los contenidos hablamos de todo el texto que haya dentro de la etiqueta y todas las etiquetas que pudiera tener, entre la apertura y cierre del elemento.

Por ejemplo, tenemos este elemento:

<div id="mielemento" style="background-color: #ffcc00; padding: 10px;">
<p>Contenidos del elemento, que luego podremos borrar!</p>
<a href="https://desarrolloweb.com">DesarrolloWeb.com</a>
</div>

Se trata de una capa DIV que a su vez tiene diversos elementos dentro. Si quisiéramos borrar todo lo que hay dentro del DIV haríamos esto:

$('mielemento').empty();

Esto no borrará la capa "mielemento" pero sí todo lo que había dentro.

Podemos ver le ejemplo en funcionamiento en una página aparte.

Método destroy()

Hemos visto que con empty() podemos borrar todo lo que haya dentro de un elemento, pero si queremos borrar todos los contenidos de ese elemento y además el propio elemento, debemos utilizar el método destroy().

Veamos ahora este elemento:

<div id="mielemento" style="background-color: #ffcc00; padding: 10px;">
<p>Contenidos del elemento, que vamos a eliminar por completo.</p>
<a href="https://desarrolloweb.com">DesarrolloWeb.com</a>
</div>

Si queremos eliminarlo totalmente de la página haríamos algo como esto:

$('mielemento').destroy();

Esto nos borrará todo el elemento, es decir, él mismo y todo lo que tuviera dentro.

Podemos ver una página con el ejemplo en marcha.

Método clone()

Ahora vamos a ver un método de Element que permite clonar cualquier elemento que tengamos en la página. Este método recibe el elemento que se desea clonar y devuelve una copia del mismo, en una variable que es un objeto de la clase Element.

Por ejemplo, tenemos un elemento como este:

<img src="http://www.desarrolloweb.com/images/logo_desarrollo_web.gif" id="miimagen" />

Esto es una imagen que vamos a clonar y para ello haremos lo siguiente:

clonada = $('miimagen').clone();

Con esto tenemos una varible llamada clonada, que dentro contiene una instancia de Element, que es una copia de la imagen que habíamos visto antes. Pero con esto no obtenemos ningún resultado, porque el elemento imagen simplemente está en una variable Javascript de la página y no se está visualizando en el navegador, a no ser que la inyectemos por algún lado.

clonada.inject($('miimagen'), 'after');

Con esto la hemos insertado dentro de la página, justo después de la imágen clonada previamente.

Podemos ver un ejemplo basado en este código para mostrar el funcionamiento del método clone().

Como hemos dicho en otras ocasiones, la clase Element es la más rica en funcionalidades de Mootools y aun quedan muchas cosas que habría que conocer. Sin embargo, para ir avanzando el manual de Mootools de desarrollo web .com y por el momento, este artículo pretendemos que sea el último en el que vamos a tratar la clase Element. En el futuro iremos mostrando otros ejemplos que con toda certeza aplicarán conocimientos que hemos relatado sobre Element, y también cosas nuevas que nos hemos dejado en el tintero.