Criando elementos do zero (Versão Vídeo)

Até agora, nós modificamos um monte
de elementos existentes na página.

Mas e se quiséssemos adicionar
novos elementos na página?

Poderíamos fazer isso com 'innerHTML',
escrevendo o HTML para as tags

dentro da cadeia de caracteres que
passamos, como fizemos aqui.

Isso pode ficar um pouco bagunçado,
especialmente se você quer criar

múltiplas tags com diferentes
atributos, estilos e classes.

Então, em vez disso, podemos usar um
conjunto inteiro de métodos de documento

para criar novos elementos do zero
e adicioná-los na página.

Vamos dizer que queremos adicionar
uma imagem de um gato na página

porque nós não achamos
que tem o suficiente ainda.

O primeiro passo é criar esse
novo elemento '< img >' , certo?

Nós queremos criá-lo.

Então vamos começar criando
uma variável para guardá-lo, catEl

E então vamos usar
document.createElement

e passar o nome da tag
que estamos criando, img.

Então agora você pode imaginar que
o navegador fez uma tag de imagem, assim.

E está flutuando no espaço em algum lugar.

Próximo passo é atribuir uma fonte a ele.

Então, catEl.src é igual a...

e vamos pegar nossa fonte daqui de cima.

- deveríamos adiciona um alt para fazer
essa imagem mais acessível -

não andei fazendo isso, mas deveria
sempre ter alt tags em nossas imagens.

Então agora você pode imaginar que essa
tag '< image >' que nós fizemos

tem um 'src' e também tem
um 'alt = "Foto de um gato fofo".

Então isso é o que fizemos
usando JavaScript aqui.

A tag '< img >' que fizemos
ainda está flutuando no espaço

porque nós não dissemos
ao navegar onde colocá-la.

E há tantos lugares diferentes
em nosso DOM em que ela poderia ir.

Vamos fazer a coisa mais fácil e apenas
fazer ela aparecer no final da página.

Podemos fazer isso colocando ela
no final da tag '< body >', então dizemos:

document.body.appendChild(catEl);

Aí está ela!

É bem grande também.

Gato muito grande - assustador.

Você pode chamar 'appendChild' em
qualquer nó DOM existente em sua página

e isso fará o elemento passado
o filho final desse nó.

Isso é onde realmente ajuda
visualizar o DOM como uma árvore.

A tag '< body >' é um nó nessa árvore
e tem um monte de filhos

como '< h1 >' e '< p1 >'

e você está adicionando mais
um filho no final de seus filhos.

Então, na verdade, ela estaria depois
da tag '< script >', logo aqui.

Usando métodos DOM, você deveria em teoria
ser capaz de adicionar elementos

em qualquer lugar dentro da árvore DOM.

Apenas colocamos no lugar
mais fácil e mais óbvio.

Vamos fazer mais um exemplo.

Usamos 'innerHTL' aqui embaixo para pôr
a tag '< strong >' dentro de '< span >'.

Em vez disso, poderíamos
usar 'createElement'.

var strongEl =
document.createElement("strong");

E eu escrevi errado
e a grafia é muito importante.

Então isso cria uma tag '< strong >'
vazia, flutuando no espaço.

Então, a primeira coisa que vamos
fazer é definir o seu texto.

strongEl.textContent = "cat";

Certo?

Alternativamente, na verdade,
poderíamos fazer essa coisa onde

criamos o que é conhecido
como um 'textNode'.

Muitos nós DOM na árvore DOM podem
ter tipos especiais de nós, 'textNode's,

como seus filhos.

E esses nós não são elementos mas
eles ainda são nós na árvore DOM.

Nós chamamos eles de
"nós folhas" porque eles são

a última coisa mesmo
que pode ter em uma árvore.

var strongText =
document.createTextNode("cat");

E vamos apenas passar o texto, "cat".

Se usarmos essa técnica, nós agora

criamos dois nós que estão flutuando
no espaço: uma tag '< strong >'

e então esse 'textNode',
que apenas diz "cat".

E nós precisamos conectá-los um ao outro.

E queremos a tag '< strong >'
para ser o pai de "cat".

Então o que vamos fazer é dizer
'strongEl.appendChild(strongText);'

Então agora nós temos a tag
'< strong >' com "cat" dentro,

e temos que colocá-la onde queremos
porque ela ainda está flutuando no espaço.

Nós estamos dentro do loop for
para 'nameEls', e cada 'nameEl'

está onde queremos colocar
a tag '< strong >'.

Então aqui,
'nameEls[i].appendChild(strongEl);'

E agora nós vemos duplicado
porque eu deixei o jeito antigo.

Ali está adicionando à tag '< span >'
que já tem uma tag '< strong >' nela.

Poderíamos mudar essa linha para
'innerHTML' é igual a uma string vazia

que vai efetivamente limpar a span
antes de adicionarmos a ela.

Agora como você viu, isso levou muito mais
linhas de código que a versão 'innerHTML'.

Então, por quê fizemos isso?

Bem, muitos desenvolvedores não gostam
de modificar o documento desse jeito

porque precisa de muito mais código.

A maioria dos desenvolvedores usa
bibliotecas, como jQuery,

para fazer modificações no DOM por eles,
o que provê funções que

fazem o mesmo código com muito menos
linhas para você como o desenvolvedor

porque você está usando as
funções da biblioteca no lugar.

Gosto de escrever meu código desse jeito
porque eu gosto de poder

ver exatamente como estou modificando
a árvore DOM, uma linha por vez.

E me parece mais limpo que empurrar tudo
dentro de uma string de innerHTML.

Mas talvez você odeie.

De qualquer forma, agora
você sabe que existe.

Então você pode usar se precisar
e você consegue entender

o que bibliotecas como jQuery estão
realmente fazendo por trás dos panos.

[Legendado por: Alberto Oliveira]
[Revisado por: Fernando dos Reis]