Ok, hasta ahora hemos estado modificando una gran cantidad de elementos existentes en la página.
¿Pero qué pasa si queremos añadir nuevos elementos a la página?
¿Podríamos hacer eso con "innerHTML", escribiendo HTML para las etiquetas
que están dentro de las cadenas de caracteres que le pasamos a "innerHTML", como lo hicimos aquí?
Eso podría ser un poco complicado, especialmente si quieres crear
muchas etiquetas con atributos, estilos y clases diferentes.
Así que en su lugar, podemos usar toda una serie de métodos de "document"
para crear nuevos elementos y añadirlos a la página.
Digamos que queremos añadir a la página una imagen de un gato,
porque pensamos que no tiene suficientes imágenes todavía.
El primer paso es crear ese elemente nuevo "", ¿cierto?
Queremos crear eso.
Así que empezamos por crear una variable para almacenarlo: "catEl".
Y luego vamos a usar "document.createElement",
y a pasar "img" en el nombre de la etiqueta que estamos haciendo.
Así que ahora te puedes imaginar que el navegador ha creado una etiqueta de imagen, como ésta,
y que está flotando en algún lugar del espacio.
El siguiente paso es asignarle una fuente, un origen.
Entonces... "catEl.src =",
y vamos a agarrar nuestra fuente de aquí arriba,
y, bueno deberíamos añadir un "alt", para hacer esta imagen más accesible,
no he estado haciendo eso, y en realidad nuestras imágenes siempre deberían tener etiquetas "alt".
Así que ahora puedes imaginar que esta etiqueta "" que hicimos
tiene un "src" y también un "alt", que es "Photo of cute cat" (Foto de un gato lindo).
Ok, esto es lo que hicimos usando el código de JavaScript que está aquí.
La etiqueta "" que hicimos sigue flotando en el espacio,
porque no le hemos dicho al navegador dónde ponerla.
Y hay tantos lugares en nuestro DOM en donde podríamos ponerla.
Vamos a hacer lo más fácil, que es ponerla al final de la página.
Podemos hacer eso pegándola al final de la etiqueta "", así que escribimos:
"document.body.appendChild(catEl);"
¡Ajá! ¡Aquí está!
Es muy grande.
Es un gato tan grande que da miedo.
Ahora, puedes llamar a "appendChild" en cualquier nodo existente del DOM de tu página,
y va a hacer que este elemento que pasamos sea el hijo final del nodo.
Aquí es donde ayuda mucho visualizar el DOM como un árbol.
La etiqueta "" es un nodo en ese árbol, y tiene muchos hijos,
como "" y "",
y estás añadiendo un hijo más al final de todos sus hijos.
Así que en realidad, éste va a estar al final de la etiqueta "", justo aquí.
Usando los métodos del DOM, teóricamente podrías añadir elementos
en cualquier parte dentro del árbol DOM.
Acabamos de ponerlo en el lugar más fácil, en el lugar más obvio.
Ok, vamos a hacer un ejemplo más.
Usamos "innerHTML" aquí abajo, para poner etiquetas "" dentro de etiquetas "".
En lugar de eso podríamos usar "createElement".
'var strongEl = document.creatElement("strong");'
Lo escribí mal, y escribirlo bien es muy importante.
Entonces esto crea una etiqueta "" vacía, que está flotando en el espacio.
Y la primera cosa que haremos es escribir un texto para esa etiqueta,
así que 'strongEl.textContent = "cat";'.
¿Está bien?
Alternativamente, en realidad podríamos hacer esta otra cosa donde
creamos un "textNode".
Muchos nodos del DOM, en el árbol DOM, pueden tener tipos especiales de nodos, nodos de texto "textNode´s",
como hijos.
Y esos nodos no son elementos, pero siguen siendo nodos del árbol DOM.
En realidad podemos llamar a esos nodos "nodos de hojas", porque son
lo último de un árbol.
Entonces, "var strongText = document.createTextNode(..."
Y le pasamos el texto: "cat".
Si usamos esta técnica, ahora hemos creado
dos nodos que están flotando en el espacio: una etiqueta "",
y este "textNode", que contiene la palabra "cat".
Y necesitamos conectarlos.
Y queremos que "" sea el padre de "cat".
Así que lo que vamos a hacer es escribir: "strongEl.appendChild(strongText);".
Ok, ahora tenemos la etiqueta "" con el texto "cat" dentro de ella,
y tenemos que ponerla donde queramos, porque sigue flotando en el espacio.
Estamos dentro del ciclo "for" modificando "nameEls" y es en cada "nameEl"
donde queremos poner la etiqueta "".
Aquí, "nameEls[i].appendChild(strongEl);".
¡Ajá!, ahora vemos que está dos veces, porque le dejé la forma anterior.
Así que la está añadiendo a una etiqueta "" que ya tiene una etiqueta "".
Podríamos cambiar esta línea e igualar "innerHTML" a una cadena de caracteres vacía,
lo que efectivamente limpiará la etiqueta "" antes de añadirle la otra.
Ahora, como has visto, hacer esto me tomó muchas más líneas de código que la versión "innerHTML".
Así que ¿por qué lo hicimos así?
Bueno, ya sabes, a muchos desarrolladores no les gusta modificar el documento de esta manera
porque hay que escribir más código.
En realidad la mayoría de los desarrolladores usan librerías como jQuery,
para hacer modificaciones al DOM, y esto les provee de funciones que
hacen lo mismo con menos líneas de código para ti como desarrollador,
porque estás usando funciones de una librería que hace todo eso en tu lugar.
A mí me gusta más escribir mi código de esta manera, lo que me gusta es que puedo ver
exactamente cómo estoy modificando el árbol DOM, una línea a la vez.
Y eso se siente más limpio que meter a empujones todo el código en una cadena de caracteres en el "innerHTML".
Pero tal vez a ti no te guste.
De cualquier forma, ahora ya sabes que existe.
Así que puedes usarlo si lo necesitas, y puedes entender
lo que las librerías como jQuery, en realidad hacen tras bambalinas.