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]