Crear y agregar

Clase 7 de 29 • Curso de Manipulación del DOM

Carlos Eduardo Gomez García

teacher•

Al decir "crear nodos" nos referimos a crear elementos dentro de nuestro DOM. Para ello podemos hacer uso de: .

createElement: Para crear una etiqueta HTML:

// Solo se ha creado, aún no se agrega al DOM
const etiquetaH1 = document.createElement("h1")

createTextNode: Para crear un texto:

// Solo se ha creado, aún no se agrega al DOM
const texto = document.createTextNode("¡Hola, Mundo!")

Como solo creamos, necesitamos formas de agregarlos al DOM, para ello, JavaScript nos provee de estas formas: .

parentElement.appendChild(): Agrega un hijo al final algún elemento

// Obtengo el elemento padre
const parentElement = document.querySelector("selector")
// Creo el nodo a insertar
const h3 = document.createElement("h3")
// Creo el texto del nodo
const texto = document.createTextNode("Hola!")
// Inserto el texto al nodo
h3.appendChild(h3)
// Inserto el nodo al padre
parentElement.appendChild(h3)

parentElement.append(): Es la evolución de appendChild, podemos agregar más de un nodo, puedes agregar texto y... no es soportado por Internet Explorer ¬¬! . Un polyfill es una adaptación del código para dar soporte a navegadores que no lo soportan, aquí está el polyfill de append: https://developer.mozilla.org/es/docs/Web/API/ParentNode/append#polyfill

// Obtengo el elemento padre
const parentElement = document.querySelector("selector")
// Agrego al elemento padre
parentElement.append("agrego un texto", document.createElement("div"))

parentElement.insertBefore(): Inserta nodos antes del elemento que le pasemos como referencia, este nodo de referencia tiene que ser un hijo DIRECTO del padre

// Obtengo el elemento padre
const parentElement = document.querySelector("selector")
// Creo un elemento
const titulo = document.createElement("h1")
// Obtengo la referencia del elemento del que quiero insertar antes:
const referencia = document.querySelector("selector")
// ¡Lo insertamos!
parentElement.insertBefore(titulo, referencia)

parentElement.insertAdjacentElement(): Inserta nodos según las opciones que le pasemos:
1. beforebegin: Lo inserta antes del nodo
2. afterbegin: Lo inserta despues del nodo
3. beforeend: Lo inserta antes de donde finaliza el nodo
4. afterend: Lo inserta después de donde finaliza el nodo

// Obtengo el elemento padre
const parentElement = document.querySelector("selector")
// Creo un elemento
const nodo = document.createElement("span")
parentElement.insertAdjacentElement("beforebegin", nodo)

Omar García Betanzos

student•

Buenísimos tus apuntes. Muchas gracias!

Andrés Felipe Lopez gomez

student•

Muy buen resumen

Fernando Quinteros Gutierrez

student•

📢 Crear y agregar Nodos

Apuntes

Podemos crear nodos de dos formas
- Crear elementos
```
document.createElement("Elemento")
```
- Podemos crear cualquier elemento que tenga su respectiva etiqueta
- El hecho de crear un elemento no significa que se agregue al DOM, estará guardado en memoria
- Crear texto
```
document.createTextNode("Texto")
```
  - Solo sera un simple texto creado para agregarlo en algún momento a un elemento

Agregar Nodos

AppendChild

Nos agrega un nodo al final del elemento en que apliquemos la operación
Es un método que existe desde hace mucho tiempo, tiene algunas limitaciones

Append

Es la evolución de appendChild
Puedes agregar más de un nodo
Puedes agregar texto sin necesidad de usar createTextNode
IE 11: No soportado

InsertBefore

Nos permite poner un nodo antes de alguna referencia que tengamos
Este método recibe dos parámetros
- Nuevo Nodo
- Referencia ⇒ Hijo directo del nodo base

InsertAdjacentElement

Es un método complejo pero el cual cuenta con una basta flexibilidad
Nos permite especificar donde poner el nuevo nodo con una lista de posiciones predefinidas

RESUMEN: Para poder crear elementos y texto de una forma imperativa, es decir mediante el JS podemos usar createElement y createTextNode. Para agregar al DOM son otros métodos como appendChild para poner al final de un elemento, append es similar solo que nos permite agregar listas y textos (sin necesidad de usar textos), insertBefore para poner antes de alguna referencia e ### insertAdjacentElement

José Luis Encastin Flores

student•

Me encantó tu resúmen. Me ayudó a sintetizar mejor los conocimientos de la clase. ¡Saludos!

David Granados

student•

Una forma rápida de ubicar selectores si usas chrome es la siguiente:

Eso te copiará al portapapeles algo como esto:

Aunque no lo recomiendo para usarlo dentro del código final de tu app, si es un buen atajo para hacer pruebas en el navegador.

Alejandro Campuzano

student•

wow está super ese truco me hubiera salvado de muchas jaja

Andrés D Amelio

student•

Resumen de la clase

Crear nodos

document.createElement

Crea un elemento HTML especificado por su tagName. Este elemento es solo creado, es decir, se crea en memoria, normalmente es asignado en una variable, pero no pertenece al DOM, no forma parte de los nodos hasta que lo indiquemos. Supongamos que queremos crear un elemento div, lo hacemos de la siguiente manera
```
document.createElement("div");
```
document.createTextNode

Este método nos permite crear un nodo de texto, generalmente es usado para escapar caracteres HTML. Recibe una cadena de texto que contiene los datos a poner en el nodo. Veamos un ejemplo,
```
document.createTextNode("Este es un nodo de texto");
```
document.createAttribute

Este método nos permite crear un nodo de tipo atributo. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento. Funciona de igual forma a los demás, solo crea un nodo, que puede o no en el DOM, veamos un ejemplo,
```
document.createAttribute("href");
```

Agregar Nodos

parentElement.appendChild

Este método nos permite agregar un elemento (Nodo) al final de la lista de hijos de un elemento padre previamente especificado, es decir, agrega un elemento dentro de un padre, y este es colocado al final. Es importante resaltar que si el Nodo que se esta insertando existe en el documento actual, es una referencia, este sera removido del padre actual y sera puesto dentro del padre que se esta especificando. por otro lado este método retorna o devuelve el elemento Nodo insertado. Supongamos que tenemos una lista, y queremos insertar un nuevo elemento con el texto "Item 3", lo haremos de la siguiente manera
```
const list = document.querySelector("#list");
const item = document.createElement("li");
const text = document.createTextNode("Item 1");

// Insertamos el texto dentro del item
item.appendChild(text);

// Insertando el item en la lista
container.appendChild(item);
```
parentElement.append

Este método es una evolución de appendChild, donde podemos agregar más de un nodo, cosa que no podemos hacer en el método anterior, podemos agregar texto. Este también agrega los nodos al final de los hijos del elemento padre especificado, y no retorna ningún elemento. No tiene soporte adecuado para IE 11. Veamos un ejemplo, donde insertaremos un texto en un elemento li, y ademas agregaremos un nuevo hijo, simulando un menú de varios niveles.
```
const container = document.querySelector("ul.container");
const item = document.createElement("li");
const subItem = document.createElement("ul");

// Agregamos el texto de item, adicional insertamos la nueva lista
item.append("Categorias", subItem);

// Agremos el item al menu
container.append(item);
```
parentElement.insertBefore

Este método permite insertar o agregar un nodo, antes del nodo que pasemos de referencia, y que pertenece al padre del que estamos accediendo a dicho método. Si insertamos un Nodo que ya esta en nuestro DOM el método lo cambia de lugar, es decir, lo quita de donde se encuentra actualmente y lo inserta en el sitio al que estamos haciendo referencia. Este método recibe dos argumentos, el primero de ellos es el Nodo que queremos insertar, y el segundo es el Nodo de referencia. Si el segundo argumento es null entonces el nodo se insertar al final de la lista de hijos del padre, es decir, actúa como el appendChild. Veamos un ejemplo,
```
const parent = document.querySelector(".container");
const item = document.querySelector(".contact");
const newItem = document.createElement("li");
const text = document.createTextNode("Blog");

newItem.append(text);

/* Insertamos el nuevo elemento al padre, lo insertaremos antes del
elemento con clase contact */
parent.insertBefore(newItem, item);
```
parentElement.insertAdjacentElement

Este método permite insertar un nodo de acuerdo a una posición especificada, y lo ubica con respecto al elemento sobre el cual es llamado. Es uno de los más complicados de usar, pero el que más opciones de inserción nos proporciona. Este método recibe 2 argumentos, el primero de ellos donde se insertará el nuevo nodo, para esto contamos con cuatro opciones, las cuales son:
- beforebegin: Inserta el elemento antes de la referencia. Es decir, antes del nodo que llama al método en cuestión.
- afterbegin: Insertar el nodo dentro del elemento referencia, pero ademas de esto lo inserta antes de su primer hijo.
- beforeend: Al igual que la opción anterior lo agrega dentro del elemento referencia, con la particularidad de que ahora lo inserta después de su ultimo hijo.
- afterend: Inserta el elemento después del nodo referencia, es decir, despues del nodo que llama al método.

Edgar Lopez Arroyo

student•

Gran resumen!! 👍

Jenniffer Paola Orjuela

student•

Excelente resumen, gracias!!

Jimmy Buriticá Londoño

student•

Alejandro Mejia Escobar

student•

Un truco que aprendí en el Curso de Debugging con Chrome DevTools: Chrome te ayuda a tener el querySelector de cualquier elemento, sólo tienes que dar click derecho > Copy > Copy JS path

Como resultado te generará un código como este

document.querySelector("body > div > main > div.py-5.text-center > h2")

Diego Hernandez

student•

Genial tu aporte

Omar García Betanzos

student•

Irving Caamal

student•

Hola si estás viendo esto IE11 ya esta muerto :D VIVAAAAA!!!

Giselle Desiree Boyer Jimenez

student•

InsertBefore y el insertAdjacentElement( 'beforebegin',ref ) tienen el mismo funcionamiento?

Jonathan 🦑 Alvarez

teacher•

Es correcto, dan el mismo resultado al final :)

Jhaider Jordan

student•

COLOR NEGRO ES MI REFERENCIA

referencia.insertAdjacentElement("beforebegin",nodo)

referencia.insertAdjacentElement("afterend",nodo)

referencia.insertAdjacentElement("beforeend",nodo)

referencia.insertAdjacentElement("afterbegin",nodo)

Arturo Malgor

student•

Me pareció que este aporte se merece unos 👏👍🙏🎊🎉🪄

David Daniel Castillo Nava

student•

Crear y Agregar Nodos:

Recordemos que esto es crear y asignar a variables no esta en el DOM

const element = document.createElement("Cualquier tipo de etiqueta html");
const text = document.createTextNode("Texto que queramos crear");

Para poder agregar nodos tendremos varias formas de hacerlo

const element = document.createElement("Cualquier tipo de etiqueta html");
element.innerText = "Agregamos este texto"; // innerText te permite agregar texto a elementos del DOM
const element2 = document.createElement("Cualquier tipo de etiqueta html");
element2.innerText = "Agregamos este texto otro texto";

const parentElement = document.getElementById("padre");

/*
appendChild:  Agrega el elemento al final de la lista de nodos del padre.
Parametro(Nodo)
*/

parentElement.appendChild(element); 

/*
append: Se le pasa un Nodo por parámetro y agrega el elemento al final de la lista de nodos del padre.
- Puedes agregar mas de un nodo.
- Puedes agregar texto
- No lo soporta IE:11 pero en serio internet explorer hasta cuando T.T

Parámetros(textos, Nodos, ...)

Toma en cuenta que append no te permitirá agregar repetida veces el mismo nodo, intenta agregando el element2 y luego volver a intentar con el element para que veas que lo que pasara es que lo cambiara de lugar. Por que lo que hará es retira el nodo y re asignarlo en la ultima posición. 
*/

parentElement.append(element2); 

/*
insertBefore: Este permite agregar como su nombre lo indica es un nodo antes de!! 

Parametros: (nodo-que-agregaremos, referencia-de-elemento)

Tomar encuentra que la referencia debe ser hijo directo del nodo base para ejemplo a seguir el element debe ser hijo directo del parentElement para poder agregar el element2 antes del element
*/

parentElement.insertBefore(element2, element);

/*
insertAdjacentElement: Este permite agregar nodos antes de comenzar la etiqueta, justo después de comenzar la etiqueta, antes de finalizar la etiqueta y luego de finalizar la etiqueta

Parametros: (ubicación: ("beforebegin", "afterbegin", "beforeend", "afterend"), nuevo_nodo)
*/
parentElement.insertAdjacentElement("beforebegin", element);
parentElement.insertAdjacentElement("afterbegin", element);
parentElement.insertAdjacentElement("beforeend", element);
parentElement.insertAdjacentElement("afterend", element);

Hoy en día existen varias formas de agregar elementos al DOM una de las que me gusta usar a mi es usando los literals strings.

// Agregando elementos con Literals Strings.
/*Prueba de esta forma*/
const parentElement = document.getElementById("element");
const elementString = `<div>Soy un div</div>`;
/*Esta primera forma asignamos al parentElement que su contenido HTML será igual a elementString*/
parentElement.innerHTML = elementString
/*En esta segunda forma asignamos al parentElement que su contenido HTML será igual al contenido HTML que este ya tiene mas el contenido que le agregamos con elementString imaginate esto como una concatenación de strings */
parentElement.innerHTML += elementString

Espero te guste mi resumen!!

Christian Latorre

student•

necesitaba este curso :)

Giselle Desiree Boyer Jimenez

student•

El document.createTextContent que el mencionó al inicio hace lo mismo que document.createTextNode ??

Jonathan 🦑 Alvarez

teacher•

Hola @giselleB, buen ojo!

El correcto es document.createTextNode

textContent existe pero se usa principalmente para leer el texto que tiene un nodo.

e.j.:

const texto = document.querySelector(h1).textContent

Saludo

Giselle Desiree Boyer Jimenez

student•

Mil gracias por la aclaratoria @jonalvarezz

Andres Felipe Pinchao Ramirez

student•

/*  Crear Nodos 

Poremos pasarle como argumento el elmento o texto  que queremos
crear y web API nos devolvera el elemento creado

Con que creemos un elemento no significa que este necesariamente
se agregue al DOM 
*/

document.createElement // Crear etiqueta HTML

    const etiquetaH1 = document.createElement("h1");

document.createTextNode // Para crear un texto

    const texto = document.createTextNode("Hola Mundo");

// Agregar Los Nodos Javascript nos provee estas formas:


parentElement.appendChild()

parentElement.append()

parentElement.insertBefore()

parentElement.insertAdjacentElement()


//Ejemplo con .appendChild Agrega un elemento hijo al final de este

//primero leemos el elemento que queremos utilizar
const container = document.querySelector('div py5 text-center');

//creamos el nodo que vamos a insertar

const h3 = document.createElement('h3')

// luego le decimos al elemento padre que vamos a agregar un elemento

container.appendChild(h3)

// agregaremos texto a nuestro elemento h3

const texto = document.createTextNode('holita');

h3.appendChild(texto)

/* node.append

Es la evolucion de appendChild

-> Puedes agregar más de un nodo, podemos pasar muchos nodos y los agregara
al final.

-> Puedes agregar texto

-> No es soporta por internet explorer

*/

container.append('hola 2', document.createElement('div'))
/*
   parentElement.insertBefore(): Inserta nodos antes del elemento que le pasemos
   como referencia, este nodo de referencia tiene que ser un hijo DIRECTO del padre

   La clave para todos los metodos que empiezan con insert es tener en cuenta
   la referencia, en insertBefore la referencia va despues de el nodo que
   queremos agregar.

   El nodo de referencia tiene que ser hijo directo del nodo base


*/
// Obtengo el elemento padre
const parentElement = document.querySelector("selector")
// Creo un elemento
const titulo = document.createElement("h1")
// Obtengo la referencia del elemento del que quiero insertar antes:
const referencia = document.querySelector("h2")
// ¡Lo insertamos!
parentElement.insertBefore(titulo, referencia)

/*

  parentElement.insertAdjacentElement() 
  Inserta un nodo segun las opciones que le pasemos al metodo

  beforebegin -> Lo inserta antes del nodo
  afterbegin ->  Lo inserta despues del nodo
  beforeend ->  Lo inserta antes de donde finaliza el nodo
  afterend ->  Lo inserta después de donde finaliza el nodo


*/
//obtengo la referencia

const referencia = document.querySelector('h2')

// creo el elemento

const nodo = document.createElement('span')

/*insertamos el nodo utilizando nuestro metodo el cual
  recibe por parametro la opcion de donde lo queremos colocar
  y luego le indicamos el elemento que vamos a insertar
*/

container.insertAdjacentElement('beforebegin', nodo);```

Usuario anónimo

user•

La MDN nos da esta guía para que podamos ir practicando:

'beforeBegin': Antes del elementoObjetivo.
'afterBegin': Dentro del elementoObjetivo, antes de su primer hijo.
'beforeEnd': Dentro del elementoObjetivo, después de su último hijo.
'afterEnd': Después del elementoObjetivo.

<!-- beforeBegin -->
  <p>
    <!-- afterBegin -->
    foo
    <!-- beforeEnd -->
  </p>
<!-- afterEnd -->

Nota: Las posiciones beforeBegin y afterEnd sólo funcionan si el nodo está en un árbol y tiene un padre.

Sebastian Gonzalez

student•

Los nodos en el dom son los elementos que creamos dentro de otro elemento, <div> <h2>Nodo</> </div>, en este ejemplo el h1 seria un nodo, su padre seria el div, pero si tomamos toda la estructura de html el nodo principal de una pagina web es la etiqueta <html>. de aqui todo elemento que este dentro de ella es un nodo padre (porque puede tener elementos dentro de el) y un “nodo hijo”.

Al trabajar con JS en la manipulación del DOM, nos encontraremos que tenemos que crear un elemento o un texto en cierta ocación. Aqui entran los metodos, document.createElement y document.createTextNode.

Estos metodos no nos agrega el elemento al documento, solo crea un espacio de memoria para luego poderlos agregar a un nodo “elemento” existente en nuestro dom. Ejemplo: .

// En nuestro DOM tenemos un div que tiene un id = container, dentro de el vamos a agregar un parrafo que diga Hello Platzi

// Primero buscamos y alojamos en memoria ese div
const parent = document.querySelector('#container');
console.log(parent);
//Output: <div id="container"></div>

// Creamos nuestro parrafo y nuestro texto
const p = document.createElement('p);
const text = document.createTextNode('Hello Platzi');

//Agregamos el texto al parrado con el metodo append
p.appendChild(text);
// Output: <p>Hello Platzi</p>
// Y ahora agregamos ese parrafo a nuestro div

parent.appendChild(p);
/* Output: 
<div id="container">
	<p>Hello Platzi</p>
</div>
*/

“ Recordar que el appendChild siempre nos agrega el elemento al final “

Metodos para agregar Elementos => .

El metodo appendChild() nos agrega un elemento al final del nodo padre. .
El metodo append() es nuevo, es una "evolución" de appendChild ya que nos permite agregar mas de 1 elemento, pero no es soportado por Internet explorer 🤔
- Para poder usarlo en Internet Explorer tenemos que usar appendChild, o un polyfill, en pocas palabras lo que hace es afaptar el codigo para dar soporte a otros navegadores.
insertBefore() nos agrega un nodo despues de una referencia, este metodo recibe 2 parametros:
1. Es el elemento que queremos pasar.
2. Es la referencia, es decir, es un elemento que ya esta en el nodo (tiene que ser un hijo directo), pero va a ser el que quede antes del que vamos a insertar.
insertAdjacentElement() es un poco mas complejo, primero debemos de tener nuestra referencia creada ya que con ella vamos a acceder a este metodo, luego este metodo recibe 2 parametros:
1. Es una lista de opciones las cuales es como queremos insertar nuestro nodo, estas son:
  - beforebegin => nos agrega el elemento que queremos antes de la referencia
  - afterbegin => lo agrega despues de la referencia
  - beforeend => lo agrega dentro de la referencia pero al final
  - afterend => lo agrega dentro de la referencia pero al inicio

Carlos Esteban León Pinilla

student•

Este es el comportamiento del insertAdjacentElment, la referencia es un h4 de color azul.

Elemento base
Usando before begin
Usando after begin - es similar a un insert before.
Usando before end - es similar a un append child
Por último usando after end

Jose Tellez

student•

Y por qué no se usa innerHTML o innerText?

Jose Tellez

student•

Esta es la respuesta que me dio chatGPT . La principal ventaja de utilizar métodos como appendChild en lugar de innerHTML es la mejor rendimiento. Cuando se usa innerHTML, el navegador debe analizar todo el HTML como una cadena, lo que puede ser costoso en términos de rendimiento si se está trabajando con un gran conjunto de datos. Además, al utilizar appendChild, puedes agregar elementos uno por uno, lo que te permite tener un mayor control sobre el orden y la estructura de tus elementos. . Otra ventaja es la seguridad, al usar innerHTML estás expuesto a ataques de inyección de código, ya que estas ingresando un string con codigo html, mientras que con appendchild estas agregando elementos de forma segura y no estas expuesto a inyecciones. . En resumen, si estás trabajando con un gran conjunto de datos o necesitas tener un gran control sobre la estructura de tus elementos, es recomendable usar métodos como appendChild en lugar de innerHTML.

Joseph Perales Retamozo

student•

¿En pleno 2022 ya no nos preocuparemos por IE no?

Nilson Diaz

student•

Hey ! No , de hecho IE ya esta practicamente "muerto", Microsoft tambien ha anunciado que en poco tiempo retirara este navegador , y librerias como React en su ultima version (18) ha dejado de ser compatible con este navegador

Joel alexander

student•

Que pasaria si creo el nodo pero nunca lo agregon al DOM principal???

Alejandro Dotor

student•

No va a pasar nada con tu web, se quedara en la memoria de JavaScript, hasta que sea utilizado. 🙋🏻‍♂️

Carlos Eduardo Gomez García

teacher•

Nada, tu nodo moriría cuando JavaScript se termine de ejecutar :D