[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.92,0:00:06.52,Default,,0000,0000,0000,,Ok, hasta ahora hemos estado modificando\Nuna gran cantidad de elementos existentes en la página.
Dialogue: 0,0:00:06.52,0:00:09.91,Default,,0000,0000,0000,,¿Pero qué pasa si queremos añadir nuevos elementos a la página?
Dialogue: 0,0:00:09.91,0:00:15.08,Default,,0000,0000,0000,,¿Podríamos hacer eso con "innerHTML", escribiendo HTML para las etiquetas
Dialogue: 0,0:00:15.08,0:00:18.93,Default,,0000,0000,0000,,que están dentro de las cadenas de caracteres que le pasamos a "innerHTML", como lo hicimos aquí?
Dialogue: 0,0:00:18.93,0:00:22.26,Default,,0000,0000,0000,,Eso podría ser un poco complicado, especialmente si quieres crear
Dialogue: 0,0:00:22.26,0:00:25.54,Default,,0000,0000,0000,,muchas etiquetas con atributos, estilos y clases diferentes.
Dialogue: 0,0:00:25.54,0:00:31.10,Default,,0000,0000,0000,,Así que en su lugar, podemos usar toda una serie de métodos de "document"
Dialogue: 0,0:00:31.10,0:00:35.39,Default,,0000,0000,0000,,para crear nuevos elementos y añadirlos a la página.
Dialogue: 0,0:00:35.39,0:00:40.68,Default,,0000,0000,0000,,Digamos que queremos añadir a la página una imagen de un gato,
Dialogue: 0,0:00:40.68,0:00:44.02,Default,,0000,0000,0000,,porque pensamos que no tiene suficientes imágenes todavía.
Dialogue: 0,0:00:44.02,0:00:48.62,Default,,0000,0000,0000,,El primer paso es crear ese elemente nuevo "", ¿cierto?
Dialogue: 0,0:00:48.62,0:00:50.79,Default,,0000,0000,0000,,Queremos crear eso.
Dialogue: 0,0:00:50.79,0:00:55.98,Default,,0000,0000,0000,,Así que empezamos por crear una variable para almacenarlo: "catEl".
Dialogue: 0,0:00:55.98,0:01:00.94,Default,,0000,0000,0000,,Y luego vamos a usar "document.createElement",
Dialogue: 0,0:01:00.94,0:01:06.62,Default,,0000,0000,0000,,y a pasar "img" en el nombre de la etiqueta que estamos haciendo.
Dialogue: 0,0:01:06.62,0:01:12.06,Default,,0000,0000,0000,,Así que ahora te puedes imaginar que el navegador ha creado una etiqueta de imagen, como ésta,
Dialogue: 0,0:01:12.06,0:01:15.07,Default,,0000,0000,0000,,y que está flotando en algún lugar del espacio.
Dialogue: 0,0:01:15.07,0:01:19.11,Default,,0000,0000,0000,,El siguiente paso es asignarle una fuente, un origen.
Dialogue: 0,0:01:19.11,0:01:23.31,Default,,0000,0000,0000,,Entonces... "catEl.src =",
Dialogue: 0,0:01:23.31,0:01:28.19,Default,,0000,0000,0000,,y vamos a agarrar nuestra fuente de aquí arriba,
Dialogue: 0,0:01:29.38,0:01:34.76,Default,,0000,0000,0000,,y, bueno deberíamos añadir un "alt", para hacer esta imagen más accesible,
Dialogue: 0,0:01:34.76,0:01:42.08,Default,,0000,0000,0000,,no he estado haciendo eso, y en realidad nuestras imágenes siempre deberían tener etiquetas "alt".
Dialogue: 0,0:01:42.08,0:01:47.18,Default,,0000,0000,0000,,Así que ahora puedes imaginar que esta etiqueta "" que hicimos
Dialogue: 0,0:01:47.18,0:01:58.14,Default,,0000,0000,0000,,tiene un "src" y también un "alt", que es "Photo of cute cat" (Foto de un gato lindo).
Dialogue: 0,0:01:58.14,0:02:04.93,Default,,0000,0000,0000,,Ok, esto es lo que hicimos usando el código de JavaScript que está aquí.
Dialogue: 0,0:02:04.93,0:02:08.98,Default,,0000,0000,0000,,La etiqueta "" que hicimos sigue flotando en el espacio,
Dialogue: 0,0:02:08.98,0:02:11.76,Default,,0000,0000,0000,,porque no le hemos dicho al navegador dónde ponerla.
Dialogue: 0,0:02:11.76,0:02:15.83,Default,,0000,0000,0000,,Y hay tantos lugares en nuestro DOM en donde podríamos ponerla.
Dialogue: 0,0:02:15.83,0:02:21.34,Default,,0000,0000,0000,,Vamos a hacer lo más fácil, que es ponerla al final de la página.
Dialogue: 0,0:02:21.34,0:02:26.30,Default,,0000,0000,0000,,Podemos hacer eso pegándola al final de la etiqueta "", así que escribimos:
Dialogue: 0,0:02:26.30,0:02:29.86,Default,,0000,0000,0000,,"document.body.appendChild(catEl);"
Dialogue: 0,0:02:29.86,0:02:31.20,Default,,0000,0000,0000,,¡Ajá! ¡Aquí está!
Dialogue: 0,0:02:31.20,0:02:32.71,Default,,0000,0000,0000,,Es muy grande.
Dialogue: 0,0:02:32.71,0:02:34.98,Default,,0000,0000,0000,,Es un gato tan grande que da miedo.
Dialogue: 0,0:02:34.98,0:02:41.20,Default,,0000,0000,0000,,Ahora, puedes llamar a "appendChild" en cualquier nodo existente del DOM de tu página,
Dialogue: 0,0:02:41.20,0:02:47.34,Default,,0000,0000,0000,,y va a hacer que este elemento que pasamos sea el hijo final del nodo.
Dialogue: 0,0:02:47.34,0:02:52.12,Default,,0000,0000,0000,,Aquí es donde ayuda mucho visualizar el DOM como un árbol.
Dialogue: 0,0:02:52.12,0:02:57.87,Default,,0000,0000,0000,,La etiqueta "" es un nodo en ese árbol, y tiene muchos hijos,
Dialogue: 0,0:02:57.87,0:03:00.08,Default,,0000,0000,0000,,como "" y "",
Dialogue: 0,0:03:00.08,0:03:04.40,Default,,0000,0000,0000,,y estás añadiendo un hijo más al final de todos sus hijos.
Dialogue: 0,0:03:04.40,0:03:09.07,Default,,0000,0000,0000,,Así que en realidad, éste va a estar al final de la etiqueta "", justo aquí.
Dialogue: 0,0:03:09.07,0:03:13.32,Default,,0000,0000,0000,,Usando los métodos del DOM, teóricamente podrías añadir elementos
Dialogue: 0,0:03:13.32,0:03:15.53,Default,,0000,0000,0000,,en cualquier parte dentro del árbol DOM.
Dialogue: 0,0:03:15.53,0:03:19.45,Default,,0000,0000,0000,,Acabamos de ponerlo en el lugar más fácil, en el lugar más obvio.
Dialogue: 0,0:03:19.45,0:03:22.02,Default,,0000,0000,0000,,Ok, vamos a hacer un ejemplo más.
Dialogue: 0,0:03:22.02,0:03:28.28,Default,,0000,0000,0000,,Usamos "innerHTML" aquí abajo, para poner etiquetas "" dentro de etiquetas "".
Dialogue: 0,0:03:28.28,0:03:31.44,Default,,0000,0000,0000,,En lugar de eso podríamos usar "createElement".
Dialogue: 0,0:03:31.44,0:03:39.63,Default,,0000,0000,0000,,'var strongEl = document.creatElement("strong");'
Dialogue: 0,0:03:39.63,0:03:43.82,Default,,0000,0000,0000,,Lo escribí mal, y escribirlo bien es muy importante.
Dialogue: 0,0:03:43.82,0:03:48.66,Default,,0000,0000,0000,,Entonces esto crea una etiqueta "" vacía, que está flotando en el espacio.
Dialogue: 0,0:03:48.66,0:03:51.88,Default,,0000,0000,0000,,Y la primera cosa que haremos es escribir un texto para esa etiqueta,
Dialogue: 0,0:03:51.88,0:03:56.57,Default,,0000,0000,0000,,así que 'strongEl.textContent = "cat";'.
Dialogue: 0,0:03:56.57,0:03:57.75,Default,,0000,0000,0000,,¿Está bien?
Dialogue: 0,0:03:57.75,0:04:01.82,Default,,0000,0000,0000,,Alternativamente, en realidad podríamos hacer esta otra cosa donde
Dialogue: 0,0:04:01.82,0:04:04.58,Default,,0000,0000,0000,,creamos un "textNode".
Dialogue: 0,0:04:04.58,0:04:09.32,Default,,0000,0000,0000,,Muchos nodos del DOM, en el árbol DOM, pueden tener tipos especiales de nodos, nodos de texto "textNode´s",
Dialogue: 0,0:04:09.32,0:04:10.73,Default,,0000,0000,0000,,como hijos.
Dialogue: 0,0:04:10.73,0:04:14.100,Default,,0000,0000,0000,,Y esos nodos no son elementos, pero siguen siendo nodos del árbol DOM.
Dialogue: 0,0:04:14.100,0:04:17.54,Default,,0000,0000,0000,,En realidad podemos llamar a esos nodos "nodos de hojas", porque son
Dialogue: 0,0:04:17.54,0:04:20.08,Default,,0000,0000,0000,,lo último de un árbol.
Dialogue: 0,0:04:20.08,0:04:27.13,Default,,0000,0000,0000,,Entonces, "var strongText = document.createTextNode(..."
Dialogue: 0,0:04:27.45,0:04:31.82,Default,,0000,0000,0000,,Y le pasamos el texto: "cat".
Dialogue: 0,0:04:31.82,0:04:34.50,Default,,0000,0000,0000,,Si usamos esta técnica, ahora hemos creado
Dialogue: 0,0:04:34.50,0:04:42.17,Default,,0000,0000,0000,,dos nodos que están flotando en el espacio: una etiqueta "",
Dialogue: 0,0:04:42.17,0:04:46.55,Default,,0000,0000,0000,,y este "textNode", que contiene la palabra "cat".
Dialogue: 0,0:04:46.55,0:04:49.68,Default,,0000,0000,0000,,Y necesitamos conectarlos.
Dialogue: 0,0:04:49.68,0:04:54.91,Default,,0000,0000,0000,,Y queremos que "" sea el padre de "cat".
Dialogue: 0,0:04:54.91,0:05:03.15,Default,,0000,0000,0000,,Así que lo que vamos a hacer es escribir: "strongEl.appendChild(strongText);".
Dialogue: 0,0:05:03.15,0:05:12.11,Default,,0000,0000,0000,,Ok, ahora tenemos la etiqueta "" con el texto "cat" dentro de ella,
Dialogue: 0,0:05:12.11,0:05:18.58,Default,,0000,0000,0000,,y tenemos que ponerla donde queramos, porque sigue flotando en el espacio.
Dialogue: 0,0:05:18.58,0:05:24.53,Default,,0000,0000,0000,,Estamos dentro del ciclo "for" modificando "nameEls" y es en cada "nameEl"
Dialogue: 0,0:05:24.53,0:05:27.35,Default,,0000,0000,0000,,donde queremos poner la etiqueta "".
Dialogue: 0,0:05:27.35,0:05:34.98,Default,,0000,0000,0000,,Aquí, "nameEls[i].appendChild(strongEl);".
Dialogue: 0,0:05:34.98,0:05:42.20,Default,,0000,0000,0000,,¡Ajá!, ahora vemos que está dos veces, porque le dejé la forma anterior.
Dialogue: 0,0:05:42.20,0:05:47.34,Default,,0000,0000,0000,,Así que la está añadiendo a una etiqueta "" que ya tiene una etiqueta "".
Dialogue: 0,0:05:47.34,0:05:52.43,Default,,0000,0000,0000,,Podríamos cambiar esta línea e igualar "innerHTML" a una cadena de caracteres vacía,
Dialogue: 0,0:05:52.43,0:05:57.82,Default,,0000,0000,0000,,lo que efectivamente limpiará la etiqueta "" antes de añadirle la otra.
Dialogue: 0,0:05:57.82,0:06:04.92,Default,,0000,0000,0000,,Ahora, como has visto, hacer esto me tomó muchas más líneas de código que la versión "innerHTML".
Dialogue: 0,0:06:04.92,0:06:06.99,Default,,0000,0000,0000,,Así que ¿por qué lo hicimos así?
Dialogue: 0,0:06:06.99,0:06:11.10,Default,,0000,0000,0000,,Bueno, ya sabes, a muchos desarrolladores no les gusta modificar el documento de esta manera
Dialogue: 0,0:06:11.10,0:06:13.43,Default,,0000,0000,0000,,porque hay que escribir más código.
Dialogue: 0,0:06:13.43,0:06:16.71,Default,,0000,0000,0000,,En realidad la mayoría de los desarrolladores usan librerías como jQuery,
Dialogue: 0,0:06:16.71,0:06:21.35,Default,,0000,0000,0000,,para hacer modificaciones al DOM, y esto les provee de funciones que
Dialogue: 0,0:06:21.35,0:06:26.87,Default,,0000,0000,0000,,hacen lo mismo con menos líneas de código para ti como desarrollador,
Dialogue: 0,0:06:26.87,0:06:29.31,Default,,0000,0000,0000,,porque estás usando funciones de una librería que hace todo eso en tu lugar.
Dialogue: 0,0:06:29.31,0:06:33.37,Default,,0000,0000,0000,,A mí me gusta más escribir mi código de esta manera, lo que me gusta es que puedo ver
Dialogue: 0,0:06:33.37,0:06:38.67,Default,,0000,0000,0000,,exactamente cómo estoy modificando el árbol DOM, una línea a la vez.
Dialogue: 0,0:06:38.67,0:06:43.04,Default,,0000,0000,0000,,Y eso se siente más limpio que meter a empujones todo el código en una cadena de caracteres en el "innerHTML".
Dialogue: 0,0:06:43.04,0:06:44.77,Default,,0000,0000,0000,,Pero tal vez a ti no te guste.
Dialogue: 0,0:06:44.77,0:06:47.19,Default,,0000,0000,0000,,De cualquier forma, ahora ya sabes que existe.
Dialogue: 0,0:06:47.19,0:06:50.94,Default,,0000,0000,0000,,Así que puedes usarlo si lo necesitas, y puedes entender
Dialogue: 0,0:06:50.94,0:06:55.06,Default,,0000,0000,0000,,lo que las librerías como jQuery, en realidad hacen tras bambalinas.