Inserir elementos HTML via JavaScript

Os elementos HTML que compõem uma página são organizados pelo

navegador na memória principal da máquina como umaestrutura
hierárquica semelhante a uma árvore genealógica de uma família. A
convenção HTML utilizada para representar os componentes de uma
página é chamada de DOM (Document Object Model) ou modelo de
objeto do documento. Por ser semelhante à estrutura hierárquica de
uma árvore genealógica, ela é também denominada de árvore DOM ou
árvore do documento.A Figura ilustra a estruturação hierárquica da
árvore DOM das tags da página HTML anterior.

Observe, a partir da figura, que a tag html se comporta como “pai” das
tags head e body. A tag body, por sua vez, tem como “filhas” as tags h1,
p e as divs. Cada div tem duas tags filhas, img e p. A codificação CSS
também utiliza com frequência essa estrutura para identificar os
elementos a serem estilizados na página. Em JavaScript, para inserir
uma nova tag HTML na página, deve-se criar uma referência ao
elemento pai, e adicionar a ele um filho. Por exemplo, se quisermos
acrescentar um novo parágrafo para exibir outras informações sobre a
imagem fig1.jpg, deve-se utilizar o método getElementById() para criar
uma referência ao elemento quadro1, e acrescentar a ele uma tag p,
que será então filha desse elemento e “irmã” das tag img e p já
existentes. Perceba também que tags de texto, como p e h1, possuem
um filho que é o próprio texto.
Inserir e manipular elementos de texto
Para inserir novos elementos de texto em uma página web via
programação JavaScript, podem ser utilizados os métodos
createElement(), createTextNode() e appendChild(). O método
createElement() é responsável por criar um novo elemento a ser
adicionado na página. Ele permite criar parágrafos, linhas de
cabeçalhos, quebras de linha, imagens e outros elementos. No caso
dos elementos de texto, é necessário utilizar o método
createTextNode() com o texto a ser inserido. Já o método appendChild()
tem a tarefa de indicar a relação “pai” e “filho” entre os elementos que
compõem a árvore DOM do documento HTML. A partir dele, é possível
definir o local da página onde o elemento será posicionado.
Vamos construir um exemplo em que esses métodos são utilizados.
Como de costume, inicie pela criação da pasta cap9 e, dentro dela, css,
img e js. Nosso primeiro programa tem como objetivo adicionar itens
em uma lista, processo semelhante ao já desenvolvido em outras
páginas deste livro. Contudo, os itens da lista são agora inseridos a
partir de tags HTML criadas pelo programa JavaScript. Também será
possível selecionar linhas, recuperar seu conteúdo e remover uma tag
no documento.
Inserir imagens

Para inserir uma imagem, bem como qualquer outro elemento na

página web a partir de um programa JavaScript, é necessário seguir os
mesmos passos já discutidos na seção anterior: a) identificar na árvore
DOM o local onde a imagem será inserida; b) criar uma referência ao
elemento pai dessa imagem; c) criar a imagem; d) modificar seus
atributos; e) indicar a relação de pai e filho entre os objetos.
Caso o pai do elemento a ser inserido na página seja o próprio
documento HTML, pode-se criar uma referência ao elemento body da
seguinte forma:

var body = document.getElementsByTagName("body")[0];

Nesse caso, ao utilizar o método appendChild(), o elemento inserido
será renderizado após as tags já existentes no corpo da página.

Manipular tabelas HTML

As tabelas são uma importante forma de exibir dados nas páginas
HTML. As tags básicas para criar uma tabela são: table para definir a
tabela, tr para criar uma linha e td para criar uma coluna em uma linha.
Também há a tag th que define uma célula de cabeçalho na tabela.

Para definir uma nova tabela via programação JavaScript, é possível

utilizar os mesmos comandos das seções anteriores e indicar que um
texto deve ser filho de td, td filho de tr e tr filho de table. Contudo, para
facilitar a manipulação das tabelas em um programa, existem os
métodos insertRow(num) e insertCell(num), que inserem,
respectivamente, uma linha e uma coluna na tabela. Então, pode-se
criar uma tabela na página ou uma referência a uma tabela existente, e
manipular sua estrutura adicionando novas linhas e colunas. Ambos os
métodos recebem como parâmetro (num) a posição da linha ou coluna
a ser inserida na tabela. 0 (zero) identifica a linha ou coluna inicial. Para
inserir uma linha no final da tabela, deve-se passar como argumento o
valor -1.
Também é possível remover uma linha da tabela a partir do método
deleteRow(num). O parâmetro indica o número da linha a ser removida.
Já a propriedade length, sempre relacionada ao tamanho de um objeto,
pode igualmente ser utilizada para recuperar o número de linhas da
tabela a partir da instrução table.rows.length.

Outro importante recurso para a manipulação de tabelas via

programação JavaScript é ter acesso ao conteúdo de uma célula da
tabela, o que pode ser feito com a criação de referências aos índices
que apontam para uma linha e coluna da tabela. Utilizar
table.rows[0].cells[0] recupera o conteúdo da primeira célula da tabela.
Ou seja, colocar essa instrução dentro de um laço de repetição vai
permitir a obtenção de todo o conteúdo da tabela.

Vamos construir um exemplo que explora esses métodos e

propriedades na manipulação de tabelas via JavaScript. O terceiro
programa deste capítulo deve cadastrar filmes na localStorage e exibir
uma tabela contendo título, gênero e uma coluna que permita ao
usuário selecionar o filme para exclusão.
O processo de exclusão ocorre se o usuário confirmar a execução
dessa tarefa no if contendo o método confirm(). Para isso, primeiro se
removem as variáveis armazenadas em localStorage (o usuário poderia
ter selecionado todos os filmes para exclusão). Na sequência, obtém-
se o conteúdo das células da tabela das linhas não marcadas e chama-
se a function que grava esses dados em localStorage. Remover tudo
primeiro para depois incluir novamente parece um pouco estranho...,
mas, para essa estrutura de armazenamento, é o modo mais simples
de executar essa tarefa.
Considerações finais da aula

Entre as muitas funções que podem ser atribuídas aos programas

JavaScript no processo de construção de sites web, interagir com o
usuário e auxiliar na montagem do layout da página são tarefas que
merecem destaque. Nesta aula, procuramos explorar a inserção de
elementos HTML na página via JavaScript a fim de tornar mais ricas as
interações com os usuários. Naturalmente, essa riqueza de elementos
e organização de layout vai expandir de acordo com a nossa criatividade
e com os conhecimentos adquiridos em áreas como User Experience,
entre outras. No geral, construir um site profissional é um trabalho
desenvolvido por uma equipe de pessoas, com tarefas definidas de
acordo com a especialidade de cada um. Para participar de uma dessas
equipes, identifique a área em que se sente mais confortável e
aprofunde seus estudos nela.
Para realizar a tarefa de inserir novos elementos na página, é necessário
compreender o modelo utilizado pelos navegadores para organizar a
relação entre os elementos que compõem a página. A árvore DOM
organiza em memória os elementos como se eles fossem parte de uma
árvore genealógica de uma família. Dessa forma, ao inserir um
elemento, deve-se determinar quem é o seu “pai”, para assim indicar
com precisão o local da página em que esse elemento será renderizado.
Os métodos JavaScript createElement() e appendChild() são os
responsáveis para criar uma nova tag no documento e acrescentar um
“filho” a um determinado elemento HTML da página, respectivamente.
Para tags de texto, como parágrafos ou linhas de cabeçalho, é preciso
utilizar o método createTextNode() com o conteúdo a ser inserido no
documento. Em seguida, deve-se igualmente utilizar o método
appendChild() para indicar a qual elemento esse texto ficará vinculado,
ou seja, quem é o seu pai.

Já as tabelas HTML contêm métodos especiais que simplificam o

processo. São eles: insertRow(), insertCell() e deleteRow(). Organizar os
dados de uma lista em tabela facilita a sua leitura, sendo que diversos
estilos CSS podem ser aplicados sobre as linhas e colunas da tabela a
fim de destacar seus elementos.

Além da possibilidade de inserir novos elementos na página, entender

a organização do modelo da árvore DOM também nos facilita na tarefa
de percorrer os elementos da página a fim de recuperar ou alterar o seu
conteúdo. Assim, podemos obter as imagens filhas de uma div na
página, os campos de formulário exibidos em uma tabela, o conteúdo
e as tags h5 do documento e, então, alterar suas propriedades, como
cores e estilos de fonte. Ou seja, com JavaScript, temos acesso a toda
a página e podemos encantar o usuário com programas que podem
auxiliá-lo em diversas rotinas do seu dia a dia.