CriarWeb.com > Manuais > Manual de Mootools

Com o objetivo de continuar nossa aprendizagem de Mootools, agora vamos ver como se poderiam criar elementos dinamicamente na página web. Este artigo se encaixa no Manual de Mootools, que estamos publicando em CriarWeb.com. Em capítulos anteriores já começamos a explicar as características do módulo Element, que serve para trabalhar com os elementos da página.

Quando nos referimos aos elementos da página, abranjamos qualquer tipo de conteúdo desta. Por exemplo, os parágrafos são elementos, as imagens ou qualquer outra coisa que colocarmos com etiquetas HTML. As listas, por exemplo, também são elementos. A própria lista é um elemento (etiqueta UL ou o), porém, são elementos cada um dos itens da lista (etiqueta LI). Sendo assim, podemos entender a página como um conjunto de elementos colocados de maneira seqüencial.

Com Mootools temos acesso a qualquer destes elementos e podemos trabalhar com eles de maneira dinâmica. Isto inclui, modificar suas propriedades, criá-los, eliminá-los, etc. Para trabalhar com um elemento da página simplesmente temos que poder nos referir a ele e para isso utilizamos seu identificador (atributo id). Para conseguir uma instância da classe Element de um elemento da página a partir de um identificador utilizávamos a função dólar, relatada no artigo anterior.

Portanto, depois desta introdução ao que são os elementos da página, vamos já com os objetivos a cobrir neste artigo de criarweb.com. Não são outros além de criar elementos dinamicamente, como resposta a execução de sentenças Javascript. Adiante veremos também como inseri-los na página, para que apareçam no lugar que nós desejarmos.

Construtor de Element

A classe Element de Mootools tem um construtor que serve para realizar as tarefas de criação de um elemento novo, ao mesmo tempo que nos oferece ferramentas para sua iniciação. O construtor é muito simples e recebe dois parâmetros, como podemos ver a seguir:

meuElemento = new Element(etiqueta, caracteristicas);

Os parâmetros do construtor são os seguintes:

Etiqueta: é o nome de uma etiqueta HTML. Por exemplo, se colocarmos "p" estaremos criando um elemento tipo parágrafo, ou se colocarmos "img" estaremos criando um elemento ou etiqueta imagem.
Características: são uma lista de características da etiqueta ou elemento que se está criando. Estas características são opcionais.

Por exemplo, podemos construir elementos desta maneira:

Construo um elemento parágrafo, etiqueta P:

var novoElemento = new Element ("p");

Construo um elemento link, etiqueta A, e à parte lhe dou uma série de características do link, para iniciar o texto do link, a URL ao qual vai dirigido, e alguns estilos CSS.

var outroElemento = new Element("a", {
   "html": "texto do link",
   "href": "url_do_link",
   "styles": {
      "background-color": "red",
      "color": "white"
   }
});

Ao construir um elemento este simplesmente se gera internamente na memória com Javascript, porém, não aparece em nenhum lugar da página. Para incluí-lo na página teremos que inserir o elemento. Tudo isto será visto nos exemplos do seguinte artigo.