0:00:00.921,0:00:07.003
Até agora, nós modificamos um monte[br]de elementos existentes na página.

0:00:07.003,0:00:10.259
Mas e se quiséssemos adicionar[br]novos elementos na página?

0:00:10.259,0:00:14.995
Poderíamos fazer isso com '<i>innerHTML</i>',[br]escrevendo o <i>HTML</i> para as tags

0:00:14.995,0:00:19.066
dentro da cadeia de caracteres que[br]passamos, como fizemos aqui.

0:00:19.066,0:00:22.258
Isso pode ficar um pouco bagunçado,[br]especialmente se você quer criar

0:00:22.258,0:00:25.540
múltiplas tags com diferentes[br]atributos, estilos e classes.

0:00:25.900,0:00:31.097
Então, em vez disso, podemos usar um[br]conjunto inteiro de métodos de documento

0:00:31.097,0:00:35.393
para criar novos elementos do zero[br]e adicioná-los na página.

0:00:36.273,0:00:40.885
Vamos dizer que queremos adicionar[br]uma imagem de um gato na página

0:00:40.885,0:00:44.018
porque nós não achamos[br]que tem o suficiente ainda.

0:00:44.018,0:00:48.620
O primeiro passo é criar esse[br]novo elemento '<i>< img ></i>' , certo?

0:00:48.620,0:00:50.786
Nós queremos criá-lo.

0:00:50.786,0:00:55.980
Então vamos começar criando[br]uma variável para guardá-lo, <i>catEl</i>

0:00:55.980,0:01:00.935
E então vamos usar[br]<i>document.createElement</i>

0:01:00.935,0:01:06.615
e passar o nome da tag[br]que estamos criando, <i>img</i>.

0:01:06.615,0:01:11.965
Então agora você pode imaginar que[br]o navegador fez uma tag de imagem, assim.

0:01:11.965,0:01:15.069
E está flutuando no espaço em algum lugar.

0:01:15.649,0:01:19.111
Próximo passo é atribuir uma fonte a ele.

0:01:19.111,0:01:23.308
Então, <i>catEl.src</i> é igual a...

0:01:23.308,0:01:29.376
e vamos pegar nossa fonte daqui de cima.

0:01:30.956,0:01:34.764
- deveríamos adiciona um <i>alt</i> para fazer[br]essa imagem mais acessível -

0:01:34.764,0:01:41.531
não andei fazendo isso, mas deveria[br]sempre ter <i>alt</i> tags em nossas imagens.

0:01:42.081,0:01:47.178
Então agora você pode imaginar que essa[br]tag '<i>< image ></i>' que nós fizemos

0:01:47.178,0:01:58.144
tem um '<i>src</i>' e também tem[br]um '<i>alt = "Foto de um gato fofo"</i>.

0:01:58.144,0:02:04.928
Então isso é o que fizemos[br]usando JavaScript aqui.

0:02:04.928,0:02:08.983
A tag '<i>< img ></i>' que fizemos[br]ainda está flutuando no espaço

0:02:08.983,0:02:11.764
porque nós não dissemos[br]ao navegar onde colocá-la.

0:02:11.764,0:02:15.832
E há tantos lugares diferentes[br]em nosso DOM em que ela poderia ir.

0:02:15.832,0:02:21.342
Vamos fazer a coisa mais fácil e apenas[br]fazer ela aparecer no final da página.

0:02:21.342,0:02:26.304
Podemos fazer isso colocando ela[br]no final da tag '<i>< body ></i>', então dizemos:

0:02:26.304,0:02:29.860
<i>document.body.appendChild(catEl);</i>

0:02:29.860,0:02:31.197
Aí está ela!

0:02:31.197,0:02:32.711
É bem grande também.

0:02:32.711,0:02:35.079
Gato muito grande - assustador.

0:02:35.199,0:02:41.198
Você pode chamar '<i>appendChild</i>' em[br]qualquer nó DOM existente em sua página

0:02:41.198,0:02:47.337
e isso fará o elemento passado[br]o filho final desse nó.

0:02:47.337,0:02:52.115
Isso é onde realmente ajuda[br]visualizar o DOM como uma árvore.

0:02:52.115,0:02:57.873
A tag '<i>< body ></i>' é um nó nessa árvore[br]e tem um monte de filhos

0:02:57.873,0:03:00.076
como '<i>< h1 ></i>' e '<i>< p1 ></i>'

0:03:00.076,0:03:04.395
e você está adicionando mais[br]um filho no final de seus filhos.

0:03:04.395,0:03:09.074
Então, na verdade, ela estaria depois[br]da tag '<i>< script ></i>', logo aqui.

0:03:09.074,0:03:13.320
Usando métodos DOM, você deveria em teoria[br]ser capaz de adicionar elementos

0:03:13.320,0:03:15.531
em qualquer lugar dentro da árvore DOM.

0:03:15.531,0:03:19.447
Apenas colocamos no lugar[br]mais fácil e mais óbvio.

0:03:19.707,0:03:22.016
Vamos fazer mais um exemplo.

0:03:22.016,0:03:28.283
Usamos '<i>innerHTL</i>' aqui embaixo para pôr[br]a tag '<i>< strong ></i>' dentro de '<i>< span ></i>'.

0:03:28.283,0:03:31.443
Em vez disso, poderíamos[br]usar '<i>createElement</i>'.

0:03:31.443,0:03:39.639
<i>var strongEl = [br]document.createElement("strong");</i>

0:03:39.639,0:03:43.824
E eu escrevi errado[br]e a grafia é muito importante.

0:03:43.824,0:03:48.663
Então isso cria uma tag '<i>< strong ></i>'[br]vazia, flutuando no espaço.

0:03:48.663,0:03:51.879
Então, a primeira coisa que vamos[br]fazer é definir o seu texto.

0:03:51.879,0:03:56.573
<i>strongEl.textContent = "cat";</i>

0:03:56.573,0:03:57.746
Certo?

0:03:58.016,0:04:01.816
Alternativamente, na verdade,[br]poderíamos fazer essa coisa onde

0:04:01.816,0:04:04.581
criamos o que é conhecido[br]como um '<i>textNode</i>'.

0:04:04.581,0:04:09.324
Muitos nós DOM na árvore DOM podem[br]ter tipos especiais de nós, '<i>textNode</i>'s,

0:04:09.324,0:04:10.726
como seus filhos.

0:04:10.726,0:04:14.998
E esses nós não são elementos mas[br]eles ainda são nós na árvore DOM.

0:04:14.998,0:04:17.541
Nós chamamos eles de [br]"nós folhas" porque eles são

0:04:17.541,0:04:20.077
a última coisa mesmo[br]que pode ter em uma árvore.

0:04:20.077,0:04:27.536
<i>var strongText = [br]document.createTextNode("cat");</i>

0:04:27.536,0:04:31.816
E vamos apenas passar o texto, "cat".

0:04:31.816,0:04:34.496
Se usarmos essa técnica, nós agora

0:04:34.496,0:04:42.169
criamos dois nós que estão flutuando[br]no espaço: uma tag '<i>< strong ></i>'

0:04:42.169,0:04:46.547
e então esse '<i>textNode</i>',[br]que apenas diz "cat".

0:04:46.547,0:04:49.680
E nós precisamos conectá-los um ao outro.

0:04:49.680,0:04:54.910
E queremos a tag '<i>< strong ></i>'[br]para ser o pai de "cat".

0:04:54.910,0:05:03.152
Então o que vamos fazer é dizer[br]'<i>strongEl.appendChild(strongText);</i>'

0:05:03.152,0:05:12.114
Então agora nós temos a tag[br]'<i>< strong ></i>' com "cat" dentro,

0:05:12.114,0:05:18.582
e temos que colocá-la onde queremos[br]porque ela ainda está flutuando no espaço.

0:05:18.582,0:05:24.527
Nós estamos dentro do loop <i>for</i>[br]para '<i>nameEls</i>', e cada '<i>nameEl</i>'

0:05:24.527,0:05:27.354
está onde queremos colocar[br]a tag '<i>< strong ></i>'.

0:05:27.354,0:05:34.975
Então aqui,[br]'<i>nameEls[i].appendChild(strongEl);</i>'

0:05:34.975,0:05:42.195
E agora nós vemos duplicado[br]porque eu deixei o jeito antigo.

0:05:42.195,0:05:47.335
Ali está adicionando à tag '<i>< span ></i>'[br]que já tem uma tag '<i>< strong ></i>' nela.

0:05:47.335,0:05:52.434
Poderíamos mudar essa linha para[br]'<i>innerHTML</i>' é igual a uma <i>string</i> vazia

0:05:52.434,0:05:57.817
que vai efetivamente limpar a <i>span</i>[br]antes de adicionarmos a ela.

0:05:57.817,0:06:04.925
Agora como você viu, isso levou muito mais[br]linhas de código que a versão '<i>innerHTML</i>'.

0:06:04.925,0:06:06.991
Então, por quê fizemos isso?

0:06:06.991,0:06:10.789
Bem, muitos desenvolvedores não gostam[br]de modificar o documento desse jeito

0:06:10.789,0:06:13.433
porque precisa de muito mais código.

0:06:13.733,0:06:16.714
A maioria dos desenvolvedores usa[br]bibliotecas, como jQuery,

0:06:16.714,0:06:21.352
para fazer modificações no DOM por eles,[br]o que provê funções que

0:06:21.352,0:06:26.873
fazem o mesmo código com muito menos[br]linhas para você como o desenvolvedor

0:06:26.873,0:06:29.810
porque você está usando as[br]funções da biblioteca no lugar.

0:06:29.810,0:06:33.496
Gosto de escrever meu código desse jeito[br]porque eu gosto de poder

0:06:33.496,0:06:38.666
ver exatamente como estou modificando[br]a árvore DOM, uma linha por vez.

0:06:38.666,0:06:43.043
E me parece mais limpo que empurrar tudo[br]dentro de uma <i>string</i> de <i>innerHTML</i>.

0:06:43.043,0:06:44.772
Mas talvez você odeie.

0:06:44.772,0:06:47.188
De qualquer forma, agora[br]você sabe que existe.

0:06:47.188,0:06:50.939
Então você pode usar se precisar[br]e você consegue entender

0:06:50.939,0:06:54.370
o que bibliotecas como jQuery estão[br]realmente fazendo por trás dos panos.

0:06:54.370,0:06:56.000
[Legendado por: Alberto Oliveira][br][Revisado por: Fernando dos Reis]