Neste artigo será visto como criar elementos usando o Javascript com informações de um JSON, embora não será explicado JSON.
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.