0:00:00.921,0:00:06.523
Ok, hasta ahora hemos estado modificando[br]una gran cantidad de elementos existentes en la página.

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

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

0:00:15.075,0:00:18.926
que están dentro de las cadenas de caracteres que le pasamos a "innerHTML", como lo hicimos aquí?

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

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

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

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

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

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

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

0:00:48.620,0:00:50.786
Queremos crear eso.

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

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

0:01:00.935,0:01:06.615
y a pasar "img" en el nombre de la etiqueta que estamos haciendo.

0:01:06.615,0:01:12.065
Así que ahora te puedes imaginar que el navegador ha creado una etiqueta de imagen, como ésta,

0:01:12.065,0:01:15.069
y que está flotando en algún lugar del espacio.

0:01:15.069,0:01:19.111
El siguiente paso es asignarle una fuente, un origen.

0:01:19.111,0:01:23.308
Entonces... "catEl.src =",

0:01:23.308,0:01:28.186
y vamos a agarrar nuestra fuente de aquí arriba,

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

0:01:34.764,0:01:42.081
no he estado haciendo eso, y en realidad nuestras imágenes siempre deberían tener etiquetas "alt".

0:01:42.081,0:01:47.178
Así que ahora puedes imaginar que esta etiqueta "" que hicimos

0:01:47.178,0:01:58.144
tiene un "src" y también un "alt", que es "Photo of cute cat" (Foto de un gato lindo).

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

0:02:04.928,0:02:08.983
La etiqueta "" que hicimos sigue flotando en el espacio,

0:02:08.983,0:02:11.764
porque no le hemos dicho al navegador dónde ponerla.

0:02:11.764,0:02:15.832
Y hay tantos lugares en nuestro DOM en donde podríamos ponerla.

0:02:15.832,0:02:21.342
Vamos a hacer lo más fácil, que es ponerla al final de la página.

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

0:02:26.304,0:02:29.860
"document.body.appendChild(catEl);"

0:02:29.860,0:02:31.197
¡Ajá! ¡Aquí está!

0:02:31.197,0:02:32.711
Es muy grande.

0:02:32.711,0:02:34.979
Es un gato tan grande que da miedo.

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

0:02:41.198,0:02:47.337
y va a hacer que este elemento que pasamos sea el hijo final del nodo.

0:02:47.337,0:02:52.115
Aquí es donde ayuda mucho visualizar el DOM como un árbol.

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

0:02:57.873,0:03:00.076
como "" y "",

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

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

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

0:03:13.320,0:03:15.531
en cualquier parte dentro del árbol DOM.

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

0:03:19.447,0:03:22.016
Ok, vamos a hacer un ejemplo más.

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

0:03:28.283,0:03:31.443
En lugar de eso podríamos usar "createElement".

0:03:31.443,0:03:39.629
'var strongEl = document.creatElement("strong");'

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

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

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

0:03:51.879,0:03:56.573
así que 'strongEl.textContent = "cat";'.

0:03:56.573,0:03:57.746
¿Está bien?

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

0:04:01.816,0:04:04.581
creamos un "textNode".

0:04:04.581,0:04:09.324
Muchos nodos del DOM, en el árbol DOM, pueden tener tipos especiales de nodos, nodos de texto "textNode´s",

0:04:09.324,0:04:10.726
como hijos.

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

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

0:04:17.541,0:04:20.077
lo último de un árbol.

0:04:20.077,0:04:27.126
Entonces, "var strongText = document.createTextNode(..."

0:04:27.448,0:04:31.816
Y le pasamos el texto: "cat".

0:04:31.816,0:04:34.496
Si usamos esta técnica, ahora hemos creado

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

0:04:42.169,0:04:46.547
y este "textNode", que contiene la palabra "cat".

0:04:46.547,0:04:49.680
Y necesitamos conectarlos.

0:04:49.680,0:04:54.910
Y queremos que "" sea el padre de "cat".

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

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

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

0:05:18.582,0:05:24.527
Estamos dentro del ciclo "for" modificando "nameEls" y es en cada "nameEl"

0:05:24.527,0:05:27.354
donde queremos poner la etiqueta "".

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

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

0:05:42.195,0:05:47.335
Así que la está añadiendo a una etiqueta "" que ya tiene una etiqueta "".

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

0:05:52.434,0:05:57.817
lo que efectivamente limpiará la etiqueta "" antes de añadirle la otra.

0:05:57.817,0:06:04.925
Ahora, como has visto, hacer esto me tomó muchas más líneas de código que la versión "innerHTML".

0:06:04.925,0:06:06.991
Así que ¿por qué lo hicimos así?

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

0:06:11.099,0:06:13.433
porque hay que escribir más código.

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

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

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

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

0:06:29.310,0:06:33.366
A mí me gusta más escribir mi código de esta manera, lo que me gusta es que puedo ver

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

0:06:38.666,0: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".

0:06:43.043,0:06:44.772
Pero tal vez a ti no te guste.

0:06:44.772,0:06:47.188
De cualquier forma, ahora ya sabes que existe.

0:06:47.188,0:06:50.939
Así que puedes usarlo si lo necesitas, y puedes entender

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