1
00:00:00,921 --> 00:00:07,003
Até agora, nós modificamos um monte
de elementos existentes na página.

2
00:00:07,003 --> 00:00:10,259
Mas e se quiséssemos adicionar
novos elementos na página?

3
00:00:10,259 --> 00:00:14,995
Poderíamos fazer isso com '<i>innerHTML</i>',
escrevendo o <i>HTML</i> para as tags

4
00:00:14,995 --> 00:00:19,066
dentro da cadeia de caracteres que
passamos, como fizemos aqui.

5
00:00:19,066 --> 00:00:22,258
Isso pode ficar um pouco bagunçado,
especialmente se você quer criar

6
00:00:22,258 --> 00:00:25,540
múltiplas tags com diferentes
atributos, estilos e classes.

7
00:00:25,900 --> 00:00:31,097
Então, em vez disso, podemos usar um
conjunto inteiro de métodos de documento

8
00:00:31,097 --> 00:00:35,393
para criar novos elementos do zero
e adicioná-los na página.

9
00:00:36,273 --> 00:00:40,885
Vamos dizer que queremos adicionar
uma imagem de um gato na página

10
00:00:40,885 --> 00:00:44,018
porque nós não achamos
que tem o suficiente ainda.

11
00:00:44,018 --> 00:00:48,620
O primeiro passo é criar esse
novo elemento '<i>< img ></i>' , certo?

12
00:00:48,620 --> 00:00:50,786
Nós queremos criá-lo.

13
00:00:50,786 --> 00:00:55,980
Então vamos começar criando
uma variável para guardá-lo, <i>catEl</i>

14
00:00:55,980 --> 00:01:00,935
E então vamos usar
<i>document.createElement</i>

15
00:01:00,935 --> 00:01:06,615
e passar o nome da tag
que estamos criando, <i>img</i>.

16
00:01:06,615 --> 00:01:11,965
Então agora você pode imaginar que
o navegador fez uma tag de imagem, assim.

17
00:01:11,965 --> 00:01:15,069
E está flutuando no espaço em algum lugar.

18
00:01:15,649 --> 00:01:19,111
Próximo passo é atribuir uma fonte a ele.

19
00:01:19,111 --> 00:01:23,308
Então, <i>catEl.src</i> é igual a...

20
00:01:23,308 --> 00:01:29,376
e vamos pegar nossa fonte daqui de cima.

21
00:01:30,956 --> 00:01:34,764
- deveríamos adiciona um <i>alt</i> para fazer
essa imagem mais acessível -

22
00:01:34,764 --> 00:01:41,531
não andei fazendo isso, mas deveria
sempre ter <i>alt</i> tags em nossas imagens.

23
00:01:42,081 --> 00:01:47,178
Então agora você pode imaginar que essa
tag '<i>< image ></i>' que nós fizemos

24
00:01:47,178 --> 00:01:58,144
tem um '<i>src</i>' e também tem
um '<i>alt = "Foto de um gato fofo"</i>.

25
00:01:58,144 --> 00:02:04,928
Então isso é o que fizemos
usando JavaScript aqui.

26
00:02:04,928 --> 00:02:08,983
A tag '<i>< img ></i>' que fizemos
ainda está flutuando no espaço

27
00:02:08,983 --> 00:02:11,764
porque nós não dissemos
ao navegar onde colocá-la.

28
00:02:11,764 --> 00:02:15,832
E há tantos lugares diferentes
em nosso DOM em que ela poderia ir.

29
00:02:15,832 --> 00:02:21,342
Vamos fazer a coisa mais fácil e apenas
fazer ela aparecer no final da página.

30
00:02:21,342 --> 00:02:26,304
Podemos fazer isso colocando ela
no final da tag '<i>< body ></i>', então dizemos:

31
00:02:26,304 --> 00:02:29,860
<i>document.body.appendChild(catEl);</i>

32
00:02:29,860 --> 00:02:31,197
Aí está ela!

33
00:02:31,197 --> 00:02:32,711
É bem grande também.

34
00:02:32,711 --> 00:02:35,079
Gato muito grande - assustador.

35
00:02:35,199 --> 00:02:41,198
Você pode chamar '<i>appendChild</i>' em
qualquer nó DOM existente em sua página

36
00:02:41,198 --> 00:02:47,337
e isso fará o elemento passado
o filho final desse nó.

37
00:02:47,337 --> 00:02:52,115
Isso é onde realmente ajuda
visualizar o DOM como uma árvore.

38
00:02:52,115 --> 00:02:57,873
A tag '<i>< body ></i>' é um nó nessa árvore
e tem um monte de filhos

39
00:02:57,873 --> 00:03:00,076
como '<i>< h1 ></i>' e '<i>< p1 ></i>'

40
00:03:00,076 --> 00:03:04,395
e você está adicionando mais
um filho no final de seus filhos.

41
00:03:04,395 --> 00:03:09,074
Então, na verdade, ela estaria depois
da tag '<i>< script ></i>', logo aqui.

42
00:03:09,074 --> 00:03:13,320
Usando métodos DOM, você deveria em teoria
ser capaz de adicionar elementos

43
00:03:13,320 --> 00:03:15,531
em qualquer lugar dentro da árvore DOM.

44
00:03:15,531 --> 00:03:19,447
Apenas colocamos no lugar
mais fácil e mais óbvio.

45
00:03:19,707 --> 00:03:22,016
Vamos fazer mais um exemplo.

46
00:03:22,016 --> 00:03:28,283
Usamos '<i>innerHTL</i>' aqui embaixo para pôr
a tag '<i>< strong ></i>' dentro de '<i>< span ></i>'.

47
00:03:28,283 --> 00:03:31,443
Em vez disso, poderíamos
usar '<i>createElement</i>'.

48
00:03:31,443 --> 00:03:39,639
<i>var strongEl = 
document.createElement("strong");</i>

49
00:03:39,639 --> 00:03:43,824
E eu escrevi errado
e a grafia é muito importante.

50
00:03:43,824 --> 00:03:48,663
Então isso cria uma tag '<i>< strong ></i>'
vazia, flutuando no espaço.

51
00:03:48,663 --> 00:03:51,879
Então, a primeira coisa que vamos
fazer é definir o seu texto.

52
00:03:51,879 --> 00:03:56,573
<i>strongEl.textContent = "cat";</i>

53
00:03:56,573 --> 00:03:57,746
Certo?

54
00:03:58,016 --> 00:04:01,816
Alternativamente, na verdade,
poderíamos fazer essa coisa onde

55
00:04:01,816 --> 00:04:04,581
criamos o que é conhecido
como um '<i>textNode</i>'.

56
00:04:04,581 --> 00:04:09,324
Muitos nós DOM na árvore DOM podem
ter tipos especiais de nós, '<i>textNode</i>'s,

57
00:04:09,324 --> 00:04:10,726
como seus filhos.

58
00:04:10,726 --> 00:04:14,998
E esses nós não são elementos mas
eles ainda são nós na árvore DOM.

59
00:04:14,998 --> 00:04:17,541
Nós chamamos eles de 
"nós folhas" porque eles são

60
00:04:17,541 --> 00:04:20,077
a última coisa mesmo
que pode ter em uma árvore.

61
00:04:20,077 --> 00:04:27,536
<i>var strongText = 
document.createTextNode("cat");</i>

62
00:04:27,536 --> 00:04:31,816
E vamos apenas passar o texto, "cat".

63
00:04:31,816 --> 00:04:34,496
Se usarmos essa técnica, nós agora

64
00:04:34,496 --> 00:04:42,169
criamos dois nós que estão flutuando
no espaço: uma tag '<i>< strong ></i>'

65
00:04:42,169 --> 00:04:46,547
e então esse '<i>textNode</i>',
que apenas diz "cat".

66
00:04:46,547 --> 00:04:49,680
E nós precisamos conectá-los um ao outro.

67
00:04:49,680 --> 00:04:54,910
E queremos a tag '<i>< strong ></i>'
para ser o pai de "cat".

68
00:04:54,910 --> 00:05:03,152
Então o que vamos fazer é dizer
'<i>strongEl.appendChild(strongText);</i>'

69
00:05:03,152 --> 00:05:12,114
Então agora nós temos a tag
'<i>< strong ></i>' com "cat" dentro,

70
00:05:12,114 --> 00:05:18,582
e temos que colocá-la onde queremos
porque ela ainda está flutuando no espaço.

71
00:05:18,582 --> 00:05:24,527
Nós estamos dentro do loop <i>for</i>
para '<i>nameEls</i>', e cada '<i>nameEl</i>'

72
00:05:24,527 --> 00:05:27,354
está onde queremos colocar
a tag '<i>< strong ></i>'.

73
00:05:27,354 --> 00:05:34,975
Então aqui,
'<i>nameEls[i].appendChild(strongEl);</i>'

74
00:05:34,975 --> 00:05:42,195
E agora nós vemos duplicado
porque eu deixei o jeito antigo.

75
00:05:42,195 --> 00:05:47,335
Ali está adicionando à tag '<i>< span ></i>'
que já tem uma tag '<i>< strong ></i>' nela.

76
00:05:47,335 --> 00:05:52,434
Poderíamos mudar essa linha para
'<i>innerHTML</i>' é igual a uma <i>string</i> vazia

77
00:05:52,434 --> 00:05:57,817
que vai efetivamente limpar a <i>span</i>
antes de adicionarmos a ela.

78
00:05:57,817 --> 00:06:04,925
Agora como você viu, isso levou muito mais
linhas de código que a versão '<i>innerHTML</i>'.

79
00:06:04,925 --> 00:06:06,991
Então, por quê fizemos isso?

80
00:06:06,991 --> 00:06:10,789
Bem, muitos desenvolvedores não gostam
de modificar o documento desse jeito

81
00:06:10,789 --> 00:06:13,433
porque precisa de muito mais código.

82
00:06:13,733 --> 00:06:16,714
A maioria dos desenvolvedores usa
bibliotecas, como jQuery,

83
00:06:16,714 --> 00:06:21,352
para fazer modificações no DOM por eles,
o que provê funções que

84
00:06:21,352 --> 00:06:26,873
fazem o mesmo código com muito menos
linhas para você como o desenvolvedor

85
00:06:26,873 --> 00:06:29,810
porque você está usando as
funções da biblioteca no lugar.

86
00:06:29,810 --> 00:06:33,496
Gosto de escrever meu código desse jeito
porque eu gosto de poder

87
00:06:33,496 --> 00:06:38,666
ver exatamente como estou modificando
a árvore DOM, uma linha por vez.

88
00:06:38,666 --> 00:06:43,043
E me parece mais limpo que empurrar tudo
dentro de uma <i>string</i> de <i>innerHTML</i>.

89
00:06:43,043 --> 00:06:44,772
Mas talvez você odeie.

90
00:06:44,772 --> 00:06:47,188
De qualquer forma, agora
você sabe que existe.

91
00:06:47,188 --> 00:06:50,939
Então você pode usar se precisar
e você consegue entender

92
00:06:50,939 --> 00:06:54,370
o que bibliotecas como jQuery estão
realmente fazendo por trás dos panos.

93
00:06:54,370 --> 00:06:56,000
[Legendado por: Alberto Oliveira]
[Revisado por: Fernando dos Reis]