O Básico da web

Em alguns casos precisamos usar alguns elementos HTML que só têm função quando há suporte a javascript, nas página que estamos desenvolvendo.

Nesse caso, o mais sensato a se fazer é criar esses elementos via JavaScript. Dessa forma eles só estarão disponíveis para o usuário caso o browser que ele estiver usando tenha suporte a javascript, ficando fora do caminho caso contrário. Assim, não criamos expectativas frustradas no usuário e temos uma página cujas funcionalidades são coerentes com o ambiente onde ela está sendo exibida.

Criar elementos via javascript não é nenhum bicho de sete cabeças. Há duas maneiras interessantes (e algumas outras não interessantes) de se fazer isso:

1. Adicionando conteúdo ao innerHTML do elemento em questão
2. Criando um objeto DOM e inserindo dentro da página via DOM API

A primeira é mais fácil e, segundo alguns testes (cujos links não tenho agora, mas vou procurar), mais rápido que o segundo. Porém não faz parte de nenhum padrão DOM e pode causar problemas em alguns casos raros, como por exemplo se você estiver usando XHTML e enviando ao browser como uma aplicação de XML. Como ninguém em sã consciência, que esteja pretendendo fazer um site com o máximo de compatibilidade faria isso, não precisa se preocupar.

A segunda segue padrões mais rígidos e vai funcionar sempre que houver um suporte decente ao DOM. Grosso modo, é menos compatível que a primeira, e devemos sempre testar a presença dos métodos necessários a sua execução antes de criar os elementos.

Vamos então aos códigos:

Usaremos o seguinte exemplo: Imagine que você tenha em sua página um botão cuja função é esconder ou mostrar um determinado conteúdo. Digamos que esta funcionalidade esteja implementada apenas por meio de JavaScript. Você não vai querer que os usuários que não tenham suporte a javascript vejam o botão e sintam-se frustrados ao clicar e nada acontecer, vai?

Portanto é importante que esse botão seja criado via JavaScript.

Criando elementos via innerHTML

innerHTML é uma propriedade que permite ler ou modificar o conteúdo HTML de um elemento HTML. Exemplo:

<p>Site do <a href=http://w3.org/>W3C</a></p>

No caso acima, o innerHTML do elemento P é “Site do <a href=http://w3.org/>W3C</a>“. Entendeu? Simples, não é?

No nosso exemplo, precisamos criar algo do tipo:

<button type="button" id="toggle">Esconder/Mostrar</button>

E depois adicionar a esse botão, via JavaScript, a funcionalidade desejada.

Antes de criar o elemento precisamos definir onde o elemento deve ser colocado. Ou seja, precisamos decidir qual será o elemento “pai” deste nosso botão.

Digamos que você tenha um DIV e que este DIV tenha o ID “conteudo”. Dentro deste DIV está o conteúdo que deve ser exibido ou escondido, dependendo do caso. O botão entraria, então, ao fim deste DIV.

Este é o código HTML do DIV conteudo:

<div id="conteudo">
<div class="texto">
<p>Aqui entra o texto.</p>
<p>Poderíamos ter um DIV apenas, mas optei por usar dois para facilitar o exemplo.</p>
</div> <!-- /texto -->
</div> <!-- /conteudo -->

Vamos lá. O primeiro passo é acessar o DIV pelo JavaScript:

var conteudo = document.getElementById('conteudo');

Jogamos uma referência ao elemento cujo ID é conteúdo para uma variável criativamente nomeada “conteudo”. Isso significa que tudo que fizermos com esta variável será aplicado de fato ao elemento referenciado.

O passo seguinte é criar o código do nosso elemento. Vamos colocá-lo em uma variável também:

var button = '<button type="button" id="toggle">Esconder/Mostrar</button>';

A variável button é uma string que contém o código do nosso botão. Agora basta colocar esse código dentro do DIV conteudo:

conteudo.innerHTML += button;

O operador += tem o efeito de adição. No caso acima é o mesmo que conteudo.innerHTML = conteudo.innerHTML + button.

Agora só falta adicionar a função javascript desejada, o que faremos ao fim do texto.

Criando elementos via DOM API

Criar elementos via DOM API não é tão simples quanto via innerHTML. Primeiro precisamos criar o elemento, depois adicionar suas propriedades e atributos e, por fim, adicioná-lo ao conteúdo da página. Acompanhe comigo.

Criando o elemento:

var button = document.createElement('button');

A linha acima cria o elemento e associa este elemento à variável button. Note que, embora tenha sido criado, o elemento ainda não está visível no documento. Continuemos.

Precisamos, agora, adicionar os atributos TYPE e ID ao botão:

button.setAttribute('type', 'button');
button.setAttribute('id', 'toggle');

Agora vamos adicionar o texto “Esconder/Mostrar” ao botão. Primeiro precisamos criar este texto no documento em uma variável e depois adicioná-lo ao botão. Assim:

var btntext = document.createTextNode('Esconder/Mostrar');
button.appendChild(btntext);

Como no outro exemplo, precisamos criar uma variável que referencie o elemento “pai”, ou seja, o DIV conteudo:

var conteudo = document.getElementById('conteudo');

E, por fim, adicionar o botão ao elemento pai:

conteudo.appendChild(button);

Ou seja, adicionamos um “filho” ao “pai” conteudo. O filho é o nosso famoso botão.

Claro que podemos adicionar elementos em outros lugares além do fim de um outro elemento, mas isso é um pouco mais avançado e fica para um outro post.

Adicionando funcionalidade ao elemento

O elemento que criamos é, até então, inútil. Vamos adicionar funcionalidade a ele. Para isso vamos usar a seguinte função:

function toggle(el) {
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

Esta função pega uma referência a um elemento como parâmetro e exibe ou esconde este elemento, dependendo do seu estado atual.

Antes de aplicar a função, vamos criar uma variável que referencie o conteúdo que será escondido ou exibido que é, no nosso caso, o DIV cuja classe é “texto” e que está dentro do DIV conteudo:

var texto = conteudo.getElementsByTagName('div')[0];

A função getElementsByTagName vai pegar todos os elementos dentro de “conteudo” que sejam definidos pela tag <div>. Essa função retorna um Array, que terá tantas posições quantos elementos existam. O [0] significa que queremos a primeira posição que, no nosso caso, é a única. (Preciso explicar melhor Arrays e getElementsByTagName. Mais uma promessa…)

Primeiro vamos adicionar esta função ao evento onclick — que é executado quando o elemento é clicado com o mouse — do botão:

button.onclick = function(){ toggle(texto); }

Depois, vamos adicioná-la ao evento onkeypress — que é executado quando o usuário digita alguma tecla enquanto tem o elemento em foco –, checando antes se a tecla pressionada foi ENTER:

button.onkeypress = function(e){
var keynum;
if(window.event) // para o IE
keynum = window.event.keyCode;
else if(e.keyCode) // Netscape/Firefox/Opera
keynum = e.keyCode;
if (keynum == 13) {
toggle(texto);
}
}

E assim temos o nosso elemento criado e funcionando.

Fazer um texto deste tamanho sobre o assunto pode fazer com que pareça mais difícil do que é, por isso veja os exemplos abaixo, com os códigos consolidados, para entender melhor como funciona e ver que não é nenhum bicho de sete cabeças:

• Exemplo de criação de elemento com innerHTML
• Exemplo de criação de elemento via DOM API

Leia também:

• Como selecionar elementos HTML via JavaScript/DOM
• Padrões web: Desenvolvimento em camadas – Camada de comportamento
• Padrões web: Desenvolvimento em camadas
• HTML – Introdução
• HTML – Esqueleto de um documento HTML – Parte 3: Outros elementos do HEAD
• Hospedagem de sites Dreamhost: 50% de desconto