No artigo anterior de nosso Manual de Mootools publicado em CriarWeb.com vimos como trabalhar com o construtor de Element. Agora vamos aprender a colocar em prática a construção de elementos e a inserção dos mesmos em algum lugar da página.

Isto será visto com um par de exemplos. Para conhecer melhor de antemão os objetivos do artigo podemos entrar para ver o resultado dos exemplos em funcionamento.

Vejamos um primeiro exemplo de construção de um elemento com Mootools e a posterior inserção do mesmo na página:

//construo um novo elemento
var novoElemento = new Element ("div");
//Coloco algo de texto dentro do elemento
novoElemento.set("html", "Este texto o coloco diretamente através de Javascript");
//insiro esse elemento na página
novoElemento.inject($("minhacamada"));


Com as anteriores linhas de código fizemos 3 coisas: Primeiro, criamos um novo elemento, neste caso uma etiqueta DIV. Logo, fiz uma chamada ao método set() do Element, no qual atribuo um pouco de texto à etiqueta. Com set() podemos atribuir todo tipo de propriedades ao elemento, entre elas, com "html" atribuímos o texto que há dentro do mesmo. Por último, insiro o elemento na página. Para isso, tenho que utilizar o método inject() indicando como parâmetro o lugar onde se tem que inserir o elemento, neste caso se colocar o elemento dentro de outro elemento chamado "minhacamada".

Suponhamos que eu tinha este HTML (observe que o div tem um id="minhacamada" para me referir a ele):

<div id="minhacamada">Criar Elementos com Mootools</div>

Pois depois da execução destas sentenças de criação e inserção do novo elemento, a página ficará com o seguinte código HTML:

<div id="minhacamada">
Criar Elementos com Mootools
<div>Coloco este texto diretamente através de Javascript</div>
</div>

Como vemos, com o método inject() da classe Element se insere o objeto que recebe o método, dentro do objeto Element que se indica como parâmetro. Embora inject() possa inserir os elementos em outros lugares, como veremos no seguinte exemplo.

Agora vamos mostrar um segundo exemplo, um pouco mais elaborado. Trata-se de inserir novos elementos a uma lista que há na página. É muito parecido ao exemplo anterior, com a exceção que agora vamos utilizar algumas características adicionais do construtor de Element.

var novoElementoLista = new Element("li", {
   "html": "Texto do elemento",
   "styles": {
      "font-size": "14pt",
      "font-weight": "bold"
   }
});
novoElementoLista.inject($("lista"), "top");

Com a primeira linha de código construo um elemento LI (um elemento de lista). Neste caso, utilizamos o segundo parâmetro do construtor de Element para especificar algumas características do elemento LI. Estas são: "html" para indicar o texto que vai dentro da etiqueta e "styles" para especificar alguns atributos de estilos CSS. Logo, na última linha se insere o elemento recém-criado dentro de outro elemento com id="lista", porém, na parte de cima (para mudar um pouco, utilizamos um segundo parâmetro do método inject() para dizer "top", com o que conseguiremos que o elemento seja introduzido acima de tudo da lista).

Se tínhamos um código HTML como este:

<ul id="lista">
<li>Elemento de lista 1</li>
<li>Outro elemento de lista</li>
</ul>

Depois da execução destas linhas de código obteremos um HTML resultante como este:

<ul id="lista">
<li style="font-size: 14pt; font-weight: bold;">Texto do elemento</li>
<li>Elemento de lista 1</li>
<li>Outro elemento de lista</li>
</ul>

Podemos ver ambos exemplos relatados neste artigo de criarweb.com no seguinte link:

Ver o exemplo em funcionamento.