WEBVTT

00:00:00.921 --> 00:00:06.523
Ok, hasta ahora hemos estado modificando
una gran cantidad de elementos existentes en la página.

00:00:06.523 --> 00:00:09.909
¿Pero qué pasa si queremos añadir nuevos elementos a la página?

00:00:09.909 --> 00:00:15.075
¿Podríamos hacer eso con "innerHTML", escribiendo HTML para las etiquetas

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í?

00:00:18.926 --> 00:00:22.258
Eso podría ser un poco complicado, especialmente si quieres crear

00:00:22.258 --> 00:00:25.540
muchas etiquetas con atributos, estilos y clases diferentes.

00:00:25.540 --> 00:00:31.097
Así que en su lugar, podemos usar toda una serie de métodos de "document"

00:00:31.097 --> 00:00:35.393
para crear nuevos elementos y añadirlos a la página.

00:00:35.393 --> 00:00:40.685
Digamos que queremos añadir a la página una imagen de un gato,

00:00:40.685 --> 00:00:44.018
porque pensamos que no tiene suficientes imágenes todavía.

00:00:44.018 --> 00:00:48.620
El primer paso es crear ese elemente nuevo "", ¿cierto?

00:00:48.620 --> 00:00:50.786
Queremos crear eso.

00:00:50.786 --> 00:00:55.980
Así que empezamos por crear una variable para almacenarlo: "catEl".

00:00:55.980 --> 00:01:00.935
Y luego vamos a usar "document.createElement",

00:01:00.935 --> 00:01:06.615
y a pasar "img" en el nombre de la etiqueta que estamos haciendo.

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,

00:01:12.065 --> 00:01:15.069
y que está flotando en algún lugar del espacio.

00:01:15.069 --> 00:01:19.111
El siguiente paso es asignarle una fuente, un origen.

00:01:19.111 --> 00:01:23.308
Entonces... "catEl.src =",

00:01:23.308 --> 00:01:28.186
y vamos a agarrar nuestra fuente de aquí arriba,

00:01:29.376 --> 00:01:34.764
y, bueno deberíamos añadir un "alt", para hacer esta imagen más accesible,

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".

00:01:42.081 --> 00:01:47.178
Así que ahora puedes imaginar que esta etiqueta "" que hicimos

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).

00:01:58.144 --> 00:02:04.928
Ok, esto es lo que hicimos usando el código de JavaScript que está aquí.

00:02:04.928 --> 00:02:08.983
La etiqueta "" que hicimos sigue flotando en el espacio,

00:02:08.983 --> 00:02:11.764
porque no le hemos dicho al navegador dónde ponerla.

00:02:11.764 --> 00:02:15.832
Y hay tantos lugares en nuestro DOM en donde podríamos ponerla.

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.

00:02:21.342 --> 00:02:26.304
Podemos hacer eso pegándola al final de la etiqueta "", así que escribimos:

00:02:26.304 --> 00:02:29.860
"document.body.appendChild(catEl);"

00:02:29.860 --> 00:02:31.197
¡Ajá! ¡Aquí está!

00:02:31.197 --> 00:02:32.711
Es muy grande.

00:02:32.711 --> 00:02:34.979
Es un gato tan grande que da miedo.

00:02:34.979 --> 00:02:41.198
Ahora, puedes llamar a "appendChild" en cualquier nodo existente del DOM de tu página,

00:02:41.198 --> 00:02:47.337
y va a hacer que este elemento que pasamos sea el hijo final del nodo.

00:02:47.337 --> 00:02:52.115
Aquí es donde ayuda mucho visualizar el DOM como un árbol.

00:02:52.115 --> 00:02:57.873
La etiqueta "" es un nodo en ese árbol, y tiene muchos hijos,

00:02:57.873 --> 00:03:00.076
como "" y "",

00:03:00.076 --> 00:03:04.395
y estás añadiendo un hijo más al final de todos sus hijos.

00:03:04.395 --> 00:03:09.074
Así que en realidad, éste va a estar al final de la etiqueta "", justo aquí.

00:03:09.074 --> 00:03:13.320
Usando los métodos del DOM, teóricamente podrías añadir elementos

00:03:13.320 --> 00:03:15.531
en cualquier parte dentro del árbol DOM.

00:03:15.531 --> 00:03:19.447
Acabamos de ponerlo en el lugar más fácil, en el lugar más obvio.

00:03:19.447 --> 00:03:22.016
Ok, vamos a hacer un ejemplo más.

00:03:22.016 --> 00:03:28.283
Usamos "innerHTML" aquí abajo, para poner etiquetas "" dentro de etiquetas "".

00:03:28.283 --> 00:03:31.443
En lugar de eso podríamos usar "createElement".

00:03:31.443 --> 00:03:39.629
'var strongEl = document.creatElement("strong");'

00:03:39.629 --> 00:03:43.824
Lo escribí mal, y escribirlo bien es muy importante.

00:03:43.824 --> 00:03:48.663
Entonces esto crea una etiqueta "" vacía, que está flotando en el espacio.

00:03:48.663 --> 00:03:51.879
Y la primera cosa que haremos es escribir un texto para esa etiqueta,

00:03:51.879 --> 00:03:56.573
así que 'strongEl.textContent = "cat";'.

00:03:56.573 --> 00:03:57.746
¿Está bien?

00:03:57.746 --> 00:04:01.816
Alternativamente, en realidad podríamos hacer esta otra cosa donde

00:04:01.816 --> 00:04:04.581
creamos un "textNode".

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",

00:04:09.324 --> 00:04:10.726
como hijos.

00:04:10.726 --> 00:04:14.998
Y esos nodos no son elementos, pero siguen siendo nodos del árbol DOM.

00:04:14.998 --> 00:04:17.541
En realidad podemos llamar a esos nodos "nodos de hojas", porque son

00:04:17.541 --> 00:04:20.077
lo último de un árbol.

00:04:20.077 --> 00:04:27.126
Entonces, "var strongText = document.createTextNode(..."

00:04:27.448 --> 00:04:31.816
Y le pasamos el texto: "cat".

00:04:31.816 --> 00:04:34.496
Si usamos esta técnica, ahora hemos creado

00:04:34.496 --> 00:04:42.169
dos nodos que están flotando en el espacio: una etiqueta "",

00:04:42.169 --> 00:04:46.547
y este "textNode", que contiene la palabra "cat".

00:04:46.547 --> 00:04:49.680
Y necesitamos conectarlos.

00:04:49.680 --> 00:04:54.910
Y queremos que "" sea el padre de "cat".

00:04:54.910 --> 00:05:03.152
Así que lo que vamos a hacer es escribir: "strongEl.appendChild(strongText);".

00:05:03.152 --> 00:05:12.114
Ok, ahora tenemos la etiqueta "" con el texto "cat" dentro de ella,

00:05:12.114 --> 00:05:18.582
y tenemos que ponerla donde queramos, porque sigue flotando en el espacio.

00:05:18.582 --> 00:05:24.527
Estamos dentro del ciclo "for" modificando "nameEls" y es en cada "nameEl"

00:05:24.527 --> 00:05:27.354
donde queremos poner la etiqueta "".

00:05:27.354 --> 00:05:34.975
Aquí, "nameEls[i].appendChild(strongEl);".

00:05:34.975 --> 00:05:42.195
¡Ajá!, ahora vemos que está dos veces, porque le dejé la forma anterior.

00:05:42.195 --> 00:05:47.335
Así que la está añadiendo a una etiqueta "" que ya tiene una etiqueta "".

00:05:47.335 --> 00:05:52.434
Podríamos cambiar esta línea e igualar "innerHTML" a una cadena de caracteres vacía,

00:05:52.434 --> 00:05:57.817
lo que efectivamente limpiará la etiqueta "" antes de añadirle la otra.

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".

00:06:04.925 --> 00:06:06.991
Así que ¿por qué lo hicimos así?

00:06:06.991 --> 00:06:11.099
Bueno, ya sabes, a muchos desarrolladores no les gusta modificar el documento de esta manera

00:06:11.099 --> 00:06:13.433
porque hay que escribir más código.

00:06:13.433 --> 00:06:16.714
En realidad la mayoría de los desarrolladores usan librerías como jQuery,

00:06:16.714 --> 00:06:21.352
para hacer modificaciones al DOM, y esto les provee de funciones que

00:06:21.352 --> 00:06:26.873
hacen lo mismo con menos líneas de código para ti como desarrollador,

00:06:26.873 --> 00:06:29.310
porque estás usando funciones de una librería que hace todo eso en tu lugar.

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

00:06:33.366 --> 00:06:38.666
exactamente cómo estoy modificando el árbol DOM, una línea a la vez.

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".

00:06:43.043 --> 00:06:44.772
Pero tal vez a ti no te guste.

00:06:44.772 --> 00:06:47.188
De cualquier forma, ahora ya sabes que existe.

00:06:47.188 --> 00:06:50.939
Así que puedes usarlo si lo necesitas, y puedes entender

00:06:50.939 --> 00:06:55.064
lo que las librerías como jQuery, en realidad hacen tras bambalinas.