Criando elementos com Javascript

CursoPDO com PHP: Aprenda a fazer um CRUD com MySQL

A tendência atual para a WEB, é que o máximo de conteúdo possível, seja processado no cliente, ou seja, o servidor retorna apenas texto em formato JSON, por exemplo, e o cliente (JS) se encarrega de montar a página.

Você já deve ter notado que o Facebook carrega uma série de códigos para depois abrir a página, isto é muito perceptível para quem tem conexões de internet lenta, e acredite, aquele carregamento foi muito rápido, o Facebook trabalha com uma tecnologia muito rápida e importante, ele traz apenas texto em formato JSON, por exemplo, e o navegador do usuário se encarrega de montar a página, visto que o processamento no cliente é muito rápido.

Neste artigo será visto como criar elementos usando o Javascript com informações de um JSON, embora não será explicado JSON.

Para montar elementos necessitamos entender primeiro como funciona o DOM, então vamos à teoria.

DOM é uma abreviação de Document Object Model (Modelo de Objeto de Documento), muito utilizado para manipular elementos de arvore, como HTML, XML e XHTML, por exemplo, onde as operações são montadas em forma de arvore.

Na imagem abaixo podemos notar que primeiro é carregado o documento, depois o HTML e assim por diante, está é a ordem de execução de uma página, um elemento tem seus respectivos atributos e valores, como podemos notar no elemento <select>, dentro dele temos o elemento <option> e dentro do <option> temos o seu texto e atribuito.

Você já deve ter visto que no JQuery por exemplo é necessário usar $(document).ready(...) ou até mesmo o addEventListener(“DOMContentLoaded”), para depois realizar alguma ações, isto acontece devido quando o script esta sendo acionado, a página como um todo não foi carregado, a execução do script esta no <head> tentando acessar um objeto que esta no body, porém o body não foi montado na arvore, assim retorna um erro que objeto informado é nulo ou algo parecido. O uso de função que verificam se a arvore foi montado é muito importante, visto que ele tem por objetivo executar operações apenas quando todo o documento/página for carregado.

Na imagem acima, note que <option> é filho de <select>, para que possamos criar elementos, devemos informar quem é o pai e a partir dele criar elementos filhos.

Caso ficou vago a explicação, leia novamente com o máximo de atenção, isto realmente é muito importante para um bom desenvolvedor.

Para se criar um elemento apenas precisamos usar, document.createElement(“elemento”), por exemplo mas este elemento tem que ser filho de alguém, no exemplo deste artigo, existe uma div com o atributo id e sem conteúdo, já que o restante será montado pelo JS, então a div será o pai, o select filho e option filho do select, esta é a ordem de montagem da arvore (DIV -> Select -> Option).

A função appendChild(), necessita de um pai para que possa ser usada e por parâmetro seja passado qual elemento será adicionado.

Veja o exemplo abaixo, onde o a variável dvPrincipal é a div pai e acessa a div dvPrincipal, a variável select armazena o elemento select que é criado, sem a necessidade de abrir nem fechar a Tag, o próprio Javascript faz esta operação, por último, a dvPrincipal insere um filho, que é o elemento select.

Código 01:

var dvPrincipal = document.getElementById("dvPrincipal");
var select = document.createElement("select");
dvPrincipal.appendChild(select);

Veja agora um exemplo completo e todo comentado, note que é criado elementos dentro de um for(), com operações em tempo de execução.

Código 02:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>DOM</title>
		<meta charset="utf-8" />
		<script>
			
			var fruta = {
				"frutas" : [
					"Banana", "Melancia", "Goiaba", "Uva", "Morango"
				]
			} /*Objeto literal para armazenamento de valores.*/
		
			document.addEventListener("DOMContentLoaded", function(){
				/*Quando a arvore for carregada..*/
				carregarDiv(); //Chama a função que carrega os elementos.
			}, false);
			
			function carregarDiv(){
				/*
					Gravamos em uma variável o objeto pai, neste caso dvPrincipal.
				*/
				var dvPrincipal = document.getElementById("dvPrincipal");
				
				/*
					createElement rece por parâmetro a tag que será criada, dispensando fechar ou uso de <>.
					
					Neste exemplo usamos select, automáticamente ele já assume:
					<select>
					
					</select>
					
					Gravamos a ação na variável select, pois ainda não foi afiliado.
				*/
				var select = document.createElement("select");
				
				/*
					appendChild() - Devemos passar por parâmetro qual elemento vai ter um filho, ou seja, onde será inserido o novo elemento.
				*/
				dvPrincipal.appendChild(select);
				
				
				/*
					Para este exemplo, foi usado um objeto literal contendo os valores.
					Para percorrer o objeto, será usado um laço for.
				*/
				for(i = 0; i < 5; i++){
					var option = document.createElement("option");
					/*
						Criamos um novo elemento do tipo option (<option></option>).
					*/
					
					/*
						Dentro do elemento option, inserimos um texto.
					*/
					option.innerHTML = fruta.frutas[i];
					
					/*
						Podemos adicionar atributos a elementos, mas é claro que apenas os suportados.
						
						No exemplo abaixo é adicionado o atributo value ao elemento contendo o valor da variável i + 1, ou seja, se i vale 0 e adicionar 1, valerá um...
					*/
					option.value = (i + 1);
					
					/*
						Dentro do objeto select adicionamos um filho, neste caso o option, contendo seus valores e atributos.
					*/
					select.appendChild(option);
				}
			}
		</script>
	</head>
	<body>
		<div id="dvPrincipal">
		</div>
	</body>
</html>

Bom, basicamente é isto, não é nada complicado, se houverem dúvidas, deixem nos comentários, será um prazer ajudar.