1
00:00:00,921 --> 00:00:06,523
Ok, hasta ahora hemos estado modificando
una gran cantidad de elementos existentes en la página.

2
00:00:06,523 --> 00:00:09,909
¿Pero qué pasa si queremos añadir nuevos elementos a la página?

3
00:00:09,909 --> 00:00:15,075
¿Podríamos hacer eso con "innerHTML", escribiendo HTML para las etiquetas

4
00:00:15,075 --> 00:00:18,926
que están dentro de las cadenas de caracteres que le pasamos a "innerHTML", como lo hicimos aquí?

5
00:00:18,926 --> 00:00:22,258
Eso podría ser un poco complicado, especialmente si quieres crear

6
00:00:22,258 --> 00:00:25,540
muchas etiquetas con atributos, estilos y clases diferentes.

7
00:00:25,540 --> 00:00:31,097
Así que en su lugar, podemos usar toda una serie de métodos de "document"

8
00:00:31,097 --> 00:00:35,393
para crear nuevos elementos y añadirlos a la página.

9
00:00:35,393 --> 00:00:40,685
Digamos que queremos añadir a la página una imagen de un gato,

10
00:00:40,685 --> 00:00:44,018
porque pensamos que no tiene suficientes imágenes todavía.

11
00:00:44,018 --> 00:00:48,620
El primer paso es crear ese elemente nuevo "", ¿cierto?

12
00:00:48,620 --> 00:00:50,786
Queremos crear eso.

13
00:00:50,786 --> 00:00:55,980
Así que empezamos por crear una variable para almacenarlo: "catEl".

14
00:00:55,980 --> 00:01:00,935
Y luego vamos a usar "document.createElement",

15
00:01:00,935 --> 00:01:06,615
y a pasar "img" en el nombre de la etiqueta que estamos haciendo.

16
00:01:06,615 --> 00:01:12,065
Así que ahora te puedes imaginar que el navegador ha creado una etiqueta de imagen, como ésta,

17
00:01:12,065 --> 00:01:15,069
y que está flotando en algún lugar del espacio.

18
00:01:15,069 --> 00:01:19,111
El siguiente paso es asignarle una fuente, un origen.

19
00:01:19,111 --> 00:01:23,308
Entonces... "catEl.src =",

20
00:01:23,308 --> 00:01:28,186
y vamos a agarrar nuestra fuente de aquí arriba,

21
00:01:29,376 --> 00:01:34,764
y, bueno deberíamos añadir un "alt", para hacer esta imagen más accesible,

22
00:01:34,764 --> 00:01:42,081
no he estado haciendo eso, y en realidad nuestras imágenes siempre deberían tener etiquetas "alt".

23
00:01:42,081 --> 00:01:47,178
Así que ahora puedes imaginar que esta etiqueta "" que hicimos

24
00:01:47,178 --> 00:01:58,144
tiene un "src" y también un "alt", que es "Photo of cute cat" (Foto de un gato lindo).

25
00:01:58,144 --> 00:02:04,928
Ok, esto es lo que hicimos usando el código de JavaScript que está aquí.

26
00:02:04,928 --> 00:02:08,983
La etiqueta "" que hicimos sigue flotando en el espacio,

27
00:02:08,983 --> 00:02:11,764
porque no le hemos dicho al navegador dónde ponerla.

28
00:02:11,764 --> 00:02:15,832
Y hay tantos lugares en nuestro DOM en donde podríamos ponerla.

29
00:02:15,832 --> 00:02:21,342
Vamos a hacer lo más fácil, que es ponerla al final de la página.

30
00:02:21,342 --> 00:02:26,304
Podemos hacer eso pegándola al final de la etiqueta "", así que escribimos:

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

32
00:02:29,860 --> 00:02:31,197
¡Ajá! ¡Aquí está!

33
00:02:31,197 --> 00:02:32,711
Es muy grande.

34
00:02:32,711 --> 00:02:34,979
Es un gato tan grande que da miedo.

35
00:02:34,979 --> 00:02:41,198
Ahora, puedes llamar a "appendChild" en cualquier nodo existente del DOM de tu página,

36
00:02:41,198 --> 00:02:47,337
y va a hacer que este elemento que pasamos sea el hijo final del nodo.

37
00:02:47,337 --> 00:02:52,115
Aquí es donde ayuda mucho visualizar el DOM como un árbol.

38
00:02:52,115 --> 00:02:57,873
La etiqueta "" es un nodo en ese árbol, y tiene muchos hijos,

39
00:02:57,873 --> 00:03:00,076
como "" y "",

40
00:03:00,076 --> 00:03:04,395
y estás añadiendo un hijo más al final de todos sus hijos.

41
00:03:04,395 --> 00:03:09,074
Así que en realidad, éste va a estar al final de la etiqueta "", justo aquí.

42
00:03:09,074 --> 00:03:13,320
Usando los métodos del DOM, teóricamente podrías añadir elementos

43
00:03:13,320 --> 00:03:15,531
en cualquier parte dentro del árbol DOM.

44
00:03:15,531 --> 00:03:19,447
Acabamos de ponerlo en el lugar más fácil, en el lugar más obvio.

45
00:03:19,447 --> 00:03:22,016
Ok, vamos a hacer un ejemplo más.

46
00:03:22,016 --> 00:03:28,283
Usamos "innerHTML" aquí abajo, para poner etiquetas "" dentro de etiquetas "".

47
00:03:28,283 --> 00:03:31,443
En lugar de eso podríamos usar "createElement".

48
00:03:31,443 --> 00:03:39,629
'var strongEl = document.creatElement("strong");'

49
00:03:39,629 --> 00:03:43,824
Lo escribí mal, y escribirlo bien es muy importante.

50
00:03:43,824 --> 00:03:48,663
Entonces esto crea una etiqueta "" vacía, que está flotando en el espacio.

51
00:03:48,663 --> 00:03:51,879
Y la primera cosa que haremos es escribir un texto para esa etiqueta,

52
00:03:51,879 --> 00:03:56,573
así que 'strongEl.textContent = "cat";'.

53
00:03:56,573 --> 00:03:57,746
¿Está bien?

54
00:03:57,746 --> 00:04:01,816
Alternativamente, en realidad podríamos hacer esta otra cosa donde

55
00:04:01,816 --> 00:04:04,581
creamos un "textNode".

56
00:04:04,581 --> 00:04:09,324
Muchos nodos del DOM, en el árbol DOM, pueden tener tipos especiales de nodos, nodos de texto "textNode´s",

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

58
00:04:10,726 --> 00:04:14,998
Y esos nodos no son elementos, pero siguen siendo nodos del árbol DOM.

59
00:04:14,998 --> 00:04:17,541
En realidad podemos llamar a esos nodos "nodos de hojas", porque son

60
00:04:17,541 --> 00:04:20,077
lo último de un árbol.

61
00:04:20,077 --> 00:04:27,126
Entonces, "var strongText = document.createTextNode(..."

62
00:04:27,448 --> 00:04:31,816
Y le pasamos el texto: "cat".

63
00:04:31,816 --> 00:04:34,496
Si usamos esta técnica, ahora hemos creado

64
00:04:34,496 --> 00:04:42,169
dos nodos que están flotando en el espacio: una etiqueta "",

65
00:04:42,169 --> 00:04:46,547
y este "textNode", que contiene la palabra "cat".

66
00:04:46,547 --> 00:04:49,680
Y necesitamos conectarlos.

67
00:04:49,680 --> 00:04:54,910
Y queremos que "" sea el padre de "cat".

68
00:04:54,910 --> 00:05:03,152
Así que lo que vamos a hacer es escribir: "strongEl.appendChild(strongText);".

69
00:05:03,152 --> 00:05:12,114
Ok, ahora tenemos la etiqueta "" con el texto "cat" dentro de ella,

70
00:05:12,114 --> 00:05:18,582
y tenemos que ponerla donde queramos, porque sigue flotando en el espacio.

71
00:05:18,582 --> 00:05:24,527
Estamos dentro del ciclo "for" modificando "nameEls" y es en cada "nameEl"

72
00:05:24,527 --> 00:05:27,354
donde queremos poner la etiqueta "".

73
00:05:27,354 --> 00:05:34,975
Aquí, "nameEls[i].appendChild(strongEl);".

74
00:05:34,975 --> 00:05:42,195
¡Ajá!, ahora vemos que está dos veces, porque le dejé la forma anterior.

75
00:05:42,195 --> 00:05:47,335
Así que la está añadiendo a una etiqueta "" que ya tiene una etiqueta "".

76
00:05:47,335 --> 00:05:52,434
Podríamos cambiar esta línea e igualar "innerHTML" a una cadena de caracteres vacía,

77
00:05:52,434 --> 00:05:57,817
lo que efectivamente limpiará la etiqueta "" antes de añadirle la otra.

78
00:05:57,817 --> 00:06:04,925
Ahora, como has visto, hacer esto me tomó muchas más líneas de código que la versión "innerHTML".

79
00:06:04,925 --> 00:06:06,991
Así que ¿por qué lo hicimos así?

80
00:06:06,991 --> 00:06:11,099
Bueno, ya sabes, a muchos desarrolladores no les gusta modificar el documento de esta manera

81
00:06:11,099 --> 00:06:13,433
porque hay que escribir más código.

82
00:06:13,433 --> 00:06:16,714
En realidad la mayoría de los desarrolladores usan librerías como jQuery,

83
00:06:16,714 --> 00:06:21,352
para hacer modificaciones al DOM, y esto les provee de funciones que

84
00:06:21,352 --> 00:06:26,873
hacen lo mismo con menos líneas de código para ti como desarrollador,

85
00:06:26,873 --> 00:06:29,310
porque estás usando funciones de una librería que hace todo eso en tu lugar.

86
00:06:29,310 --> 00:06:33,366
A mí me gusta más escribir mi código de esta manera, lo que me gusta es que puedo ver

87
00:06:33,366 --> 00:06:38,666
exactamente cómo estoy modificando el árbol DOM, una línea a la vez.

88
00:06:38,666 --> 00:06:43,043
Y eso se siente más limpio que meter a empujones todo el código en una cadena de caracteres en el "innerHTML".

89
00:06:43,043 --> 00:06:44,772
Pero tal vez a ti no te guste.

90
00:06:44,772 --> 00:06:47,188
De cualquier forma, ahora ya sabes que existe.

91
00:06:47,188 --> 00:06:50,939
Así que puedes usarlo si lo necesitas, y puedes entender

92
00:06:50,939 --> 00:06:55,064
lo que las librerías como jQuery, en realidad hacen tras bambalinas.