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